Question

我有以下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的水平显示不同。

请帮帮我。

Answer 1

您需要分别遍历每个<li>中的<ul>，方法是将第二个each循环（对于<li> s）放在第一个{<1}}内。 / p>

例如：

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);
        });
});

（测试）

Answer 2

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

  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;
    });

  });

（未测试的）

还要考虑这件事要做服务器端。

Answer 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;        
      }
   )

});

根据级别向UL和LI添加类

3 个答案: