Question

I want to add a class for a container element by the number of child items. But my code ads only a class for the first container and that is added wrong.

This is what I trying to do:

<ul>
 <li>
  <div id="container" class="add class here for example col3">
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
  </div>
 </li>
 <li>
  <div id="container" class="add class here for example col1">
   <div class="child"></div>
  </div>
 </li>
</ul>

I wrote this code for a case when the container has only one child but it doesn’t work.
This ads the col1 class to the first container which has 3 children 🙁

window.addEvent('domready', function() {
    var children = $('container').getChildren('div.child');
    if(children.length = 1) {
      $('container').set('class', 'col1');
    }
});

So I’m stuck here.

Answer 1

Your problem is the fact that you’re assigning the same ID to all your containers. Try something like this :

window.addEvent("domready", function(){
    $$("div.container").each(function(item, i){
        var childCount = item.getChildren("div.child").length;
        item.addClass("col" + childCount);
    });​​​​​​​​
});

HTML :

<ul>
 <li>
  <div class="container">
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
  </div>
 </li>
 <li>
  <div class="container">
   <div class="child"></div>
  </div>
 </li>
</ul>​

See it working here : http://jsfiddle.net/kSVL5/