使用jQuery的级别指示器

Question

我们可以使用Jquery / JS在下面的每个级别添加类吗？这样我们就可以确定我们在哪个级别的列表中。

<ul>
<li class="level1">level 1
     <ul>
     <li class="level2">level 2</li>
     <li class="level2">level 2</li>
     <li class="level2">level 2
         <ul>
         <li class="level3">level 3</li>
         <li class="level3">level 3</li>
         <li class="level3">level 3
             <ul>
             <li class="level4">level 4</li>
             <li class="level4">level 4</li>
             <li class="level4">level 4</li>
             </ul>
         </li>
         </ul>
     </li>
     <ul>
</li>
<li class="level1">level 1</li>
<li class="level1">level 1</li>
</ul>

Answer 1

尝试使用.each()，.parents()，.length

$("li").each(function(i,el) {
  $(this).addClass("level" + $(this).parents("ul").length)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<ul>
<li>level 1
     <ul>
     <li>level 2</li>
     <li>level 2</li>
     <li>level 2
         <ul>
         <li>level 3</li>
         <li>level 3</li>
         <li>level 3
             <ul>
             <li>level 4</li>
             <li>level 4</li>
             <li>level 4</li>
             </ul>
         </li>
         </ul>
     </li>
     </ul>

</li>
<li>level 1</li>
<li>level 1</li>
</ul>

Answer 2

这是一种无需继续查找父母的方式。

＆＃13;

＆＃13;

(function find(par, index) {
    index += 1; 
    var lis = par.find("> li").addClass("level" + index);
    if (lis.length) {
        find(lis.find("> ul"),index);  
    }
}($("ul#start"),0))

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<ul id="start">
<li>level 1
     <ul>
     <li>level 2</li>
     <li>level 2</li>
     <li>level 2
         <ul>
         <li>level 3</li>
         <li>level 3</li>
         <li>level 3
             <ul>
             <li>level 4</li>
             <li>level 4</li>
             <li>level 4</li>
             </ul>
         </li>
         </ul>
     </li>
     </ul>

</li>
<li>level 1</li>
<li>level 1</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用简单的递归函数执行此操作。

function addLevels(parent, level) {
  parent = parent || $("body").children("ul");
  level = level || 1;
  var children = parent.children("li");
  children.addClass("level" + level);
  parent = children.children("ul");
  if (parent.length)
    addLevels(parent, ++level);
}

$(function() {
  addLevels();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>level 1
    <ul>
      <li>level 2</li>
      <li>level 2</li>
      <li>level 2
        <ul>
          <li>level 3</li>
          <li>level 3</li>
          <li>level 3
            <ul>
              <li>level 4</li>
              <li>level 4</li>
              <li>level 4</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>level 1</li>
  <li>level 1</li>
</ul>

Answer 4

如果你想要一些额外的速度，你可以尝试一个纯粹的JavaScript解决方案。这是一个供人们思考的食物。

http://jsfiddle.net/fqp74r8j/

var listArr = document.querySelectorAll('ul');

[].forEach.call(listArr, function(el, i) {
    var listLen = el.children.length;

    for (var j = 0; j < el.children.length; j++) {
        el.children[j].classList.add('level-' + (i + 1));
    }
});