Mootools通过子类的数量将类添加到容器中

Question

我想按子项的数量为容器元素添加一个类。但我的代码只为第一个容器广告了一个类，这是错误添加的。

这就是我想要做的：

<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>

我为容器只有一个子容器但不起作用的情况编写了这段代码。这将col1类广告到具有3个子级的第一个容器：（

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

所以我被困在这里了。

Answer 1

您的问题是为所有容器分配相同的ID。试试这样的东西：

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>​

请在此处查看它的工作情况：http://jsfiddle.net/kSVL5/