使用 .each() 的 jQuery 函数有问题
Having Trouble with jQuery Function using .each()
我有一个由 Bootstrap 下拉菜单组成的导航。在每个下拉列表中,会生成 15-20 个列表项。我无权访问 HTML,因为它是在我无法触摸的地方动态生成的。由于列表项的数量,我需要将它们分为三列。
我创建了一个 jQuery 函数来计算 li 的数量,将它们除以 3,然后将它们包装在 Bootstrap 列中。一切都运行良好,但我需要在每个下拉菜单上触发相同的功能,并且只计算其各自下拉菜单中的 li。同样,我无法访问 HTML 来为每个下拉菜单指定一个 ID,但它们都有 class "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 -->
工作 jQuery 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>");
}
});
尝试使用 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 并针对每个 li 执行。
编辑: 使用更正的逻辑Fiddle 正确处理余数:http://jsfiddle.net/743qLqma/5/
您可以在 each 中使用 $(this) 来访问当前下拉列表,例如使用 $(this).find(....)
查找其子项
在 each()
方法中你应该 select 像这样的内部元素
$(this).find(".dropdown-menu li")
而不是
$(".dropdown-menu li")
这个工作jsfiddle
我有一个由 Bootstrap 下拉菜单组成的导航。在每个下拉列表中,会生成 15-20 个列表项。我无权访问 HTML,因为它是在我无法触摸的地方动态生成的。由于列表项的数量,我需要将它们分为三列。
我创建了一个 jQuery 函数来计算 li 的数量,将它们除以 3,然后将它们包装在 Bootstrap 列中。一切都运行良好,但我需要在每个下拉菜单上触发相同的功能,并且只计算其各自下拉菜单中的 li。同样,我无法访问 HTML 来为每个下拉菜单指定一个 ID,但它们都有 class "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 -->
工作 jQuery 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>");
}
});
尝试使用 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 并针对每个 li 执行。
编辑: 使用更正的逻辑Fiddle 正确处理余数:http://jsfiddle.net/743qLqma/5/
您可以在 each 中使用 $(this) 来访问当前下拉列表,例如使用 $(this).find(....)
查找其子项在 each()
方法中你应该 select 像这样的内部元素
$(this).find(".dropdown-menu li")
而不是
$(".dropdown-menu li")
这个工作jsfiddle