根据级别向 UL 和 LI 添加类答案

【问题标题】：Adding class to the UL and LI as per the level根据级别向 UL 和 LI 添加类
【发布时间】：2010-05-14 22:05:53
【问题描述】：

我有以下 HTML 标记。

<ul class="thumbs">
    <li>
      <strong>Should be level 0</strong>
    </li>
    <li>
      <strong>Should be level 1</strong>
    </li>
    <li>
      <strong>Should be level 2</strong>
    </li>
</ul>

<ul class="thumbs">
    <li>
      <strong>Should be level 0 --  </strong>
    </li>
    <li>
      <strong>Should be level 1 --  </strong>
    </li>
</ul>

和javascript：

var i = 0;
  var j = 0;
  jQuery('ul.thumbs').each(function(){
    var newName = 'ul -level' + i;
    jQuery(this).addClass('ul-level-'+i)
      .before('<h2>'+newName+'</h2>');
    i = i+1;
  });

  jQuery('ul.thumbs li').each(function(){
    jQuery(this).addClass('li-level-'+j)
      .append('li-level-'+j);
    j = j+1;
  });

JS Bin Link

但第二个 UL LI 的级别显示不同。

请帮帮我。

【问题讨论】：

标签： jquery html

【解决方案1】：

您需要通过将第二个each 循环（用于<li>s）放在第一个循环中，分别循环每个<ul> 中的<li>s。

例如：

var i = 0;
jQuery('ul.thumbs').each(function(){
    var newName = 'ul -level' + i;
    jQuery(this).addClass('ul-level-'+i)
        .before('<h2>'+newName+'</h2>');
    i++;

    var j = 0;
    jQuery(this).children('li').each(function(){
        jQuery(this).addClass('li-level-'+j)
            .append('li-level-'+j);
        j++;
    });
});

顺便说一句，each 带有一个索引参数，所以你不需要你的 i 和 j 变量：

jQuery('ul.thumbs').each(function(i){
    var newName = 'ul -level' + i;

    jQuery(this).addClass('ul-level-' + i)
        .before('<h2>' + newName + '</h2>')

        .children('li').each(function(j) {
            jQuery(this).addClass('li-level-' + j)
                .append('li-level-' + j);
        });
});

（已测试）

【讨论】：

+1 用于指出each 的索引参数的编辑。我刚刚输入了一个答案来指出这一点，但你毁了我的乐趣。

【解决方案2】：

您需要在每个ul 之后重置j：

  var i = 0;
  var j = 0;
  jQuery('ul.thumbs').each(function(){
    var newName = 'ul -level' + i;
    jQuery(this).addClass('ul-level-'+i)
      .before('<h2>'+newName+'</h2>');
    i = i+1;

    j = 0;
    jQuery('li', this).each(function(){
      jQuery(this).addClass('li-level-'+j)
        .append('li-level-'+j);
      j = j+1;
    });

  });

（未测试）

也可以考虑在服务器端做这件事。

【讨论】：

【解决方案3】：

对于每个 UL，您应该处理子 LI

var i = 0;
var j = 0;

jQuery('ul.thumbs').each(function(){ 
   var newName = 'ul -level' + i;
   jQuery(this).addClass('ul-level-'+i)
    .before('<h2>'+newName+'</h2>');
   i = i+1;

   j=0;

   jQuery(this).children("li").each(
    function(){
     jQuery(this).addClass('li-level-'+j)
         .append('li-level-'+j);
         j = j+1;        
      }
   )

});

【讨论】：