Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2008
    Location
    Colfax, California USA
    Posts
    64
    Thanks
    3
    Thanked 5 Times in 5 Posts

    Prototype: $$('.class').childElements() how to do?

    I'm Using the Prototype Javascript Framework.

    So how can I get something like
    Code:
    $$('.class').childElements()
    to return element nodes, not an array.

    right now I'm using
    Code:
    $('id').childElements()
    but i want it to apply to every element with a certain class.

    right now it says
    Code:
    $$('.class').childElements
    is not a function.

    I've also tried (gave the body tag an id of body)
    Code:
    $('body').getElementsByClassName('class').childElements()
    but that doesn't work either.
    Last edited by rhinodog8; 11-11-2008 at 04:55 AM.

  • #2
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    Code:
    $$('li.droppable').each(function(s){ alert( s.identify(); });
    that would iterate through the returned array and alert for each id for li elements with droppable as a class. tinker with it, you'll get the idea.

  • #3
    New Coder
    Join Date
    Aug 2008
    Location
    Colfax, California USA
    Posts
    64
    Thanks
    3
    Thanked 5 Times in 5 Posts
    yeah, I know how to do that, what I need to do is apply an each function on the children elements of a certain class.

    This my entire code right now, but it relys on a spefic id to do it

    Code:
    function accordion(){
    	var children = $('accordion').childElements();
    	var i = 1;
    	
            children.each(function(a) {a.setAttribute("value", i++);
    	
            if (i % 2 == 0) {a.setStyle({backgroundColor: '#d4d4d4', padding:'0px 0px 0px 50px'});
    	a.insert(Builder.node('div', {className: 'arrow'}))};
    	
            if (i % 2 == 1) {Effect.BlindUp(a, {duration:0.5})};
    	
            $$('.arrow').invoke('observe', 'click', function(){
    	Effect.toggle(this.parentNode.next(),'slide', { duration: 0.5});
    	});
    
    	$$('.left').each(function(l){l.setStyle({textAlign:'left'})})
    	$$('.right').each(function(r){r.setStyle({textAlign:'right'})})
    	})
    }
    the bold part needs to select all the child elements of any element with the class 'accordion'

  • #4
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    put a loop in a loop

    where i put that alert, put a second $$() with an each as well.

    so something like..

    Code:
    $$('li.droppable').each(function(s){ 
    
    $$('the kids').each(function(s){ whatever(); }
    });

  • Users who have thanked ohgod for this post:

    rhinodog8 (11-13-2008)

  • #5
    Banned
    Join Date
    Nov 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #6
    New Coder
    Join Date
    Aug 2008
    Location
    Colfax, California USA
    Posts
    64
    Thanks
    3
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by ohgod View Post
    put a loop in a loop

    where i put that alert, put a second $$() with an each as well.

    so something like..

    Code:
    $$('li.droppable').each(function(s){ 
    
    $$('the kids').each(function(s){ whatever(); }
    });
    Oh wow, can't believe I didn't think of that. Thanks!

    Hers my code now if anyone wanted to know:

    Code:
    function accordion(){
    var i = 1;
    $$('.class').each(function(c){
    
    c.childElements().each(function(a) {a.setAttribute("value", i++);
    
    if (i % 2 == 0) {
    a.setStyle({backgroundColor: '#d4d4d4', padding:'0px 0px 0px 50px'});
    a.insert(Builder.node('div', {className: 'arrow'}))
    };
    
    if (i % 2 == 1) {
    Effect.BlindUp(a, {duration:0.5});
    a.setStyle({fontSize: '20px', textAlign: 'center', padding:'5px'})};
    
    $$('.arrow').invoke('observe', 'click', function(){
    Effect.toggle(this.parentNode.next(),'slide', { duration: 0.5});
    }
    );
    })
    })}
    Last edited by rhinodog8; 11-13-2008 at 04:11 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •