使用.each（）解决jQuery函数问题

I have a navigation that is made up of Bootstrap dropdowns. Within each dropdown there are 15-20 list-items being generated. I do not have access to the HTML because it's being generated dynamically in a place I can't touch. Due to the number of list-items, I have a requirement to put them into three columns.

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

I created a jQuery function to count the li's, divide them by 3 and then wrap them in Bootstrap columns. Everything is working perfectly, but I need to fire the same function on each dropdown menu and only count the li's within its respective dropdown menu. Again, I don't have access to the HTML to give each dropdown an ID, but they all have the class "dropdown-menu".

我创建了一个jQuery函数来计算li,将它们除以3,然后将它们包装在Bootstrap列中。一切都运行得很好,但是我需要在每个下拉菜单上激活相同的功能,并且只在其各自的下拉菜单中计算li。同样,我无权访问HTML以为每个下拉列表提供ID,但它们都具有“dropdown-menu”类。

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 -->

Working jQuery with ID:

使用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>");
    }

});

Attempt at using each():

尝试使用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>");
        }
    });
});

I think the problem is that my function is counting every li under every .dropdown-menu, instead of counting the li's within the current .dropdown-menu and executing for each one.

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

EDIT: Working Fiddle with corrected logic to handle remainders properly: http://jsfiddle.net/743qLqma/5/

编辑:工作小提琴正确处理余数的纠正逻辑:http://jsfiddle.net/743qLqma/5/

2 个解决方案

#1

in each() method you should select inner elements like this

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

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

instead of

$(".dropdown-menu li")

this working jsfiddle

这个工作的jsfiddle

#2

You can use $(this) with in the each to access the current dropdown and for example look for its children using $(this).find(....)

您可以在每个中使用$(this)来访问当前下拉列表,例如使用$(this).find(....)查找其子项

#1