Question

我花了很多时间试图弄清楚这一点并研究答案，但我发现的答案中没有一个考虑到计算每个列表。我需要的东西可以计算每个元素中带有类“nav”的类“链接”的元素总数。我需要将该数字存储为变量，因此我可以根据范围限定符向“nav”元素添加新类。

<ul class="nav">
    <li class="link"></li>
    <li class="link"></li>
    <li class="link"></li>
    <li class="link">
        <ul class="subnav">
            <li class="link"></li>
            <li class="link"></li>
            <li class="link"></li>
            <li class="link"></li>
            <li class="link"></li>
        </ul>
    </li>
</ul>
<ul class="nav">
    <li class="link"></li>
    <li class="link"></li>
    <li class="link">
        <ul class="subnav">
            <li class="link"></li>
            <li class="link"></li>
            <li class="link"></li>
        </ul>
    </li>
    <li class="link">
        <ul class="subnav">
            <li class="link"></li>
            <li class="link"></li>
        </ul>
    </li>
</ul>

非常感谢任何帮助！

Answer 1

您可以这样做：

var items = $.map( $(".nav"), function(navEl) {
    return [navEl, navEl.find(".link").length];
});

console.log( items );

我正在使用jQuery.map()基于.nav元素构造一个新数组 - 构造数组中的每个元素都是自己的数组：第一个索引是jQuery对象，第二个索引是jQuery对象是孩子的.link元素的计数。

Answer 2

您可以使用此代码计算具有类link的每个元素中具有类nav的元素数量：

$(document).ready(function(){
    $('body').find('.nav').each(function(){
        sum = 0;
        $(this).find('.link').each(function(){
        sum=sum+1;
        });
        console.log(sum);
    });
});

Answer 3

在今天早上进行了一些挖掘之后（在加载StackOverflow之前），我终于能够开发出这个答案了：

$('.nav').each(function(){
    var numLinks = $(this).find('.link').length;
    if (numLinks > 40) {
        $(this).addClass('mm-5-cols');
    } else if (numLinks > 30 && numLinks <= 40) {
        $(this).addClass('mm-4-cols');
    } else if (numLinks > 20 && numLinks <= 30) {
        $(this).addClass('mm-3-cols');
    } else if (numLinks > 10 && numLinks <= 20) {
        $(this).addClass('mm-2-cols');
    } else if (numLinks <= 10) {
        $(this).addClass('mm-1-col');
    }
});

（如果解决方案代码稍微关闭，请道歉。我从实际代码中修改它以匹配我的示例代码。）

感谢那些用他们自己的代码回答的人！

对于每个列表，计算具有匹配类的元素总数

3 个答案: