查找ul's的嵌套顺序并添加特定的类

Find nested order of ul's and add specific classes

本文关键字：添加 顺序 嵌套 查找 ul      更新时间：2023-09-26

我想找出一种方法来循环通过这样的容器

<nav id="container">
  <ul>
    <li>Text</li>
    <li>
      <ul>
        <li>Text</li>
        <li>
          <ul>
            <!-- And so on -->
          </ul>
       </li>
      </ul>
    <li>
  </ul>
</nav>

并检查ul嵌套的深度，如果是第一个，则添加class="level-1"，如果是第二个，则添加.level-2等。请记住，每个<ul>可以包含多个嵌套的ul(多级导航)。

DEMO

简单地迭代通过ul s和创建一个类名基于多少父ul s每个，使用parentsUntil()的情况下，#container是在一个ul。

$(function(){
    $('#container ul').each(function(){
        var classname = 'level-' + ($(this).parentsUntil('#container', 'ul').length + 1);
        $(this).addClass(classname);
    });
});

更简短的写法是

(由Arun p Johny提供)
$('#container ul').addClass(function(){
    return 'level-' + ($(this).parentsUntil('#container', 'ul').length + 1);
});

您最初包含了CSS标记。如果这纯粹是为了CSS，你可以直接使用CSS。见http://jsfiddle.net/a9jrd8sn/4/

相关文章：