Question

我的导航看起来像这样：

<div class="sub_navigation">   
    <ul>
        <li>First Level
            <ul>
                <li>Second Level</li>
                <li>Second Level
                    <ul>
                        <li>Third Level</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>First Level
            <ul>
                <li>Second Level</li>
                <li>Second Level
                    <ul>
                        <li>Third Level
                          <ul>
                             <li>Fourth Level</li>
                          </ul>
                       </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

基本上，李永远可以拥有无数的孩子。我需要获得最高级别的数量例如，现在我正在寻找数字4，因为第二个li有4个等级。

我尝试了两种不同的方法：

首先，我自己的尝试失败了：

$count = 1;

$('.sub_navigation > .menu > li').each(function() {
    countChildren($count);
});

function countChildren() {
    $(this).children('ul').each(function() {
        $count++;
        console.log($count);
    });
    return($count);
}

其次，我从堆栈溢出中获取的方式，但对我来说也没有用，只是每次都返回0：

var arr = []; //populate the length of children into this array.
$('.sub_navigation ul').map(function (i) {
    arr[i] = $(this).children('ul').length;
});
var maxValue = Math.max.apply(Math, arr); //get the max value from the array

console.log(maxValue);

有人可以指出我正确的方向吗？我遗憾地不知道如何解决这个问题。

非常感谢！

Answer 1

您可以使用parentsUntil()之类的

var temp = $('.sub_navigation li').map(function() {
  return $(this).parentsUntil('.sub_navigation', 'ul').length;
}).get();
var max = Math.max.apply(Math, temp);
snippet.log('Count: ' + max)

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub_navigation">
  <ul>
    <li>First Level
      <ul>
        <li>Second Level</li>
        <li>Second Level
          <ul>
            <li>Third Level</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>First Level
      <ul>
        <li>Second Level</li>
        <li>Second Level
          <ul>
            <li>Third Level
              <ul>
                <li>Fourth Level
                  <ul>
                    <li>Fifth Level</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 2

而不是从上到下，你可以用另一种方式做到。

检查每个li有多少ul个祖先

var ulAncestorsPerLi = $( '.sub_navigation li' ).map(function(){
         return $(this).parentsUntil( '.sub_navigation', 'ul' ).length;
    }).get(),
    deepestLevel = Math.max.apply( Math, ulAncestorsPerLi );

alert( deepestLevel );

var ulAncestorsPerLi = $('.sub_navigation li').map(function() {
    return $(this).parentsUntil('.sub_navigation', 'ul').length;
  }).get(),
  deepestLevel = Math.max.apply(Math, ulAncestorsPerLi);

alert(deepestLevel);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="sub_navigation">
  <ul>
    <li>First Level
      <ul>
        <li>Second Level</li>
        <li>Second Level
          <ul>
            <li>Third Level</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>First Level
      <ul>
        <li>Second Level</li>
        <li>Second Level
          <ul>
            <li>Third Level
              <ul>
                <li>Fourth Level</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

与大多数特定班级的孩子一起获取元素

2 个答案: