JQuery .each 不使用 class 遍历所有元素

Question

我正在为托管在我雇主使用的内容管理平台上的高度自定义页面开发导航解决方案。

我正在尝试构建一个循环遍历具有特定 class 的所有元素的函数，读取数据存储值，然后将基于该值的外部资源加载到容器中 div。

虽然该函数适用于第一个匹配项，但它会在该点停止 - 不会迭代文档的其余部分。该函数本身在单独的 $(document).ready(function() 块中调用，因为我在页面加载时有几个函数运行。

编辑：玩不同的东西时代码已经过时，下面是当前代码。

Javascript:

 function loadNavigation() {
 $('.topLevelNav').each(function () {
 var topLevelNavIndex = $(this).data('nav-index')+1;
 var topLevelNavItem = spaceMainContent + " table tr:nth-child(" + topLevelNavIndex + ") td:nth-child(2)";
 $(this).children().first().load(topLevelNavItem);
});
}

HTML:

<div class="topLevelNav" data-nav-index="1">Main
 <div>Container</div>
<div class="subLevelNav" data-nav-index ="3">Sub<div>Container</div></div>
<div class="subLevelNav" data-nav-index ="4">Sub<div>Container</div></div>
<div class="subLevelNav" data-nav-index ="5">Sub<div>Container</div></div>
<div class="subLevelNav" data-nav-index ="6">Sub<div>Container</div></div>
<div class="subLevelNav" data-nav-index ="2">Sub<div>Container</div></div>
</div>
<div class="topLevelNav" data-nav-index ="2">Main
<div>Container</div>
<div class="subLevelNav" data-nav-index ="3">Sub<div>Container</div></div>
<div class="subLevelNav" data-nav-index ="5">Sub<div>Container</div></div>
<div class="subLevelNav" data-nav-index ="2">Sub<div>Container</div></div>
</div>
<div class="topLevelNav" data-nav-index ="3">Main
<div>Container</div>
<div class="subLevelNav" data-nav-index ="2">Sub<div>Container</div></div>
</div>

我一辈子都弄不明白为什么它在第一场比赛后就停止了，但我也不是一个聪明人。有什么想法吗？

Answer 1

如果你想处理sublevelnavs，你的选择器是错误的。将其更改为

$('.topLevelNav .subLevelNav').each(function () {

如果你只想遍历顶层的 subLevelNavs

或

$('.subLevelNav').each(function () {

如果您想遍历每个子级导航

JQuery .each 不使用 class 遍历所有元素

JQuery .each not looping through all elements with class

javascript

each

jquery

loops