计算最大嵌套列表项 JQuery、Javascript、HTML答案

【问题标题】：Count maximum nested list items JQuery, Javascript, HTML计算最大嵌套列表项 JQuery、Javascript、HTML
【发布时间】：2013-08-21 12:02:06
【问题描述】：

我有一个带有嵌套列表的无序列表。使用 Jquery 或 Javascript，我需要在悬停在“top_level_list”ul 上的所有嵌套列表中找到“second_level_item”列表项的最大计数。例如，如果我将鼠标悬停在下面的“top_level_list”上，它应该输出数字 3，因为第二个嵌套列表包含 3 个项目，这是任何给定嵌套列表的最大数量。

<ul class="top_level_list">
    <li class="top_level_item">
        <ul class="second_level_list">
            <li class="second_level_item">This list has 1 item - A</li>
        </ul>
    </li>
    <li class="top_level_item">
        <ul class="second_level_list">
            <li class="second_level_item">This list has 3 items - A</li>
            <li class="second_level_item">This list has 3 items - B</li>
            <li class="second_level_item">This list has 3 items - C</li>
        </ul>
    </li>
</ul>

我当前的代码重新调整所有“second_level_list”中所有列表项的总和，因此它输出数字 4。

$(function countMax() {
    $('.top_level_list').hover(
        function () {
            var countMaxItem = $(this).children('.top_level_item').children('.second_level_list').children('.second_level_item').length;
            alert(countMaxItem);
        }, function () {
            //empty
        }
    );
});

提前致谢。

【问题讨论】：

标签： javascript jquery html loops

【解决方案1】：

你可以用这个：

var result = Math.max.apply(null, ($('.second_level_list', this).map(function() {
    return $(this).children('li').length;
}));

或

var counts = [];
$('.second_level_list', this).each(function() {
    counts.push($(this).children('li').length);
});
var result = Math.max.apply(null, counts);

Demo

【讨论】：

【解决方案2】：

这将遍历所有 second_level_list，然后计算它们的 second_level_item 子项，如果它比以前更高，则更新最大计数计数器。

$(function countMax() {
    $('.top_level_list').hover(

    function () {
        maxCount = 0;
        $('.second_level_list', this).each(function (index, secondLevelList) {
            if ($(secondLevelList).children('.second_level_item').length > maxCount) {
                maxCount = $(secondLevelList).children('.second_level_item').length;
            }
        });
        alert(maxCount);
    },

    function () {
        //empty
    });
});

【讨论】：