Search code examples
javascriptyui3

yui child selector


I have a two divs which have class name "container". Each of this divs contain equal no. of children. I want to assign a class to nth child of each container. How can I do this using YUI3

<div class="container">
  <div class="child"></div>
  <div class="child selected"></div>
  <div class="child"></div>
</div>

<div class="container">
  <div class="child"></div>
  <div class="child selected"></div>
  <div class="child"></div>
</div>

Solution

  • You can do this by iterating through each parent and then manipulate its children:

    YUI().use('node', function(Y){
        Y.all('.container').each(function(elt) {
            elt.all('.child').item(1).removeClass('selected');
            elt.all('.child').item(2).addClass('selected');
        });
    });
    

    Just change item(N) to whatever number you need. Here's an example: http://jsfiddle.net/DS3dy/8/