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