javascript - 使用 .each() 处理 jQuery 函数时遇到问题

Question

我有一个由 Bootstrap 下拉菜单组成的导航。在每个下拉列表中，会生成 15-20 个列表项。我无权访问 HTML，因为它是在我无法触及的地方动态生成的。由于列表项的数量，我需要将它们分为三列。

我创建了一个 jQuery 函数来计算 li，将它们除以 3，然后将它们包装在 Bootstrap 列中。一切都运行良好，但我需要在每个下拉菜单上触发相同的功能，并且只计算其各自下拉菜单中的 li。同样，我无法访问 HTML 来为每个下拉菜单指定一个 ID，但它们都有“下拉菜单”类。

HTML:

<!-- begin nav -->
<div class="navbar navbar-inverse yamm">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">IPOG</a>
    </div>
    <div class="navbar-nocollapse">
        <ul class="nav navbar-nav navbar-right">
            <!-- Forms -->
            <li><a href="#">Home</a></li>
            <li class="dropdown"><a href="#" class="dropdown-toggle">Page Link</a>
                <ul class="dropdown-menu" id="test">
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                </ul>
            </li>
            <li class="dropdown"><a href="#" class="dropdown-toggle">Page Link</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                </ul>
            </li>
            <li class="dropdown"><a href="#" class="dropdown-toggle">Page Link</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<!-- end navbar -->

使用 ID 使用 jQuery:

$(function() {

    //Variables
    var n = $("#test li").length,
    x = n / 3,
    lis = $("#test li");

    for(var i = 0; i < lis.length; i+=x) {
        lis.slice(i, i+x).wrapAll("<div class='col-xs-4'></div>");
    }

});

尝试使用 each():

$(function() {
    $(".dropdown").each(function() {
        //Variables
        var n = $(".dropdown-menu li").length,
        x = n / 3,
        lis = $(".dropdown-menu li");

        for(var i = 0; i < lis.length; i+=x) {
            lis.slice(i, i+x).wrapAll("<div class='col-xs-4'></div>");
        }
    });
});

我认为问题在于我的函数正在计算每个 .dropdown-menu 下的每个 li，而不是计算当前 .dropdown-menu 中的 li 并为每个执行。

编辑:使用修正后的逻辑来正确处理余数:http://jsfiddle.net/743qLqma/5/

Answer 1

在 each() 方法中你应该像这样选择内部元素

$(this).find(".dropdown-menu li")

代替

$(".dropdown-menu li")

这个工作 jsfiddle