Question

我试图想出一种像这样循环通过容器的方法

<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>可以包含多个Date#getTime()一个嵌套的ul（多级导航）。

Answer 1

<强> DEMO

只需遍历ul并根据每个ul的父#container创建一个类名，如果ul在{{1}之内，则使用parentsUntil() }}

$(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/

找到ul的嵌套顺序并添加特定的类

1 个答案: