使用.east()在jQuery函数上遇到麻烦

Question

我有一个由引导下拉列表组成的导航。在每个下拉列表中，都会生成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一起工作：

$(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>");
    }
});

尝试使用每个（）：

$(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，并为每个li执行。

编辑：使用更正的逻辑工作，以正确处理剩余的逻辑：http：//jsfiddle.net/743qlqma/5/

Answer 1

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

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

而不是

$(".dropdown-menu li")

此工作JSFIDDLE

Answer 2

您可以在每个中使用$（this）访问当前下拉列表，例如，使用$（this）.find（....）