我正在尝试使用“下一个”/“上一个”按钮遍历多个列表。 我的方法适用于单个列表。我无法找到最初选择的列表下方或上方的列表的 ID。我必须使用什么 jquery 方法？我在下面发布了我的示例代码，希望它有意义。
我尝试了 .parent().next() 没有成功。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>List</title>
<style>
.selected_bkg {
color: blue;
text-decoration: underline;
cursor: pointer;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="prv">Prev</button><button id="next">Next</button>
<div id="liid" hidden>1a</div>
<div id="uls">
<div class="">Category Fruits</div>
<ul>
<li class="lis selected_bkg" id="1a">Orange</li>
<li class="lis" id="2a">Apple</li>
<li class="lis" id="3a">Pear</li>
</ul>
<div class="">Category Vegitables</div>
<ul>
<li class="lis" id="1b">Carrot</li>
<li class="lis" id="2b">Cabbage</li>
<li class="lis" id="3b">Brocoli</li>
</ul>
<div class="">Category Meat</div>
<ul>
<li class="lis" id="1c">Beef</li>
<li class="lis" id="2c">Chicken</li>
<li class="lis" id="3c">Mutton</li>
</ul>
</div>
<script>
$('#next').click(function() {
lid=$('#liid').text()
$('#'+lid).toggleClass('selected_bkg')
nxtid=$('#'+lid).next('.lis').attr('id')
if(typeof nxtid == 'undefined') {
nxtid=$('#'+lid).parent().next('.lis').attr('id')
}
$('#'+nxtid).toggleClass('selected_bkg')
console.log(lid, nxtid, '-',$('#'+nxtid).text(),'-')
$('#liid').text(nxtid)
});
$('#prv').click(function() {
lid=$('#liid').text()
$('#'+lid).toggleClass('selected_bkg')
nxtid=$('#'+lid).prev('.lis').attr('id')
if(typeof nxtid == 'undefined') {
nxtid=$('#'+lid).parent().prev('.lis').attr('id')
}
$('#'+nxtid).toggleClass('selected_bkg')
console.log(lid, nxtid, '-',$('#'+nxtid).text(),'-')
$('#liid').text(nxtid)
});
</script>
</body>
</html>
最佳答案
这里有一个片段可以解决这个问题 - 循环遍历列表项，而不是注意“它们在哪里”。
$('#next').on('click', function() {
nextPrev(1)
})
$('#prv').on('click', function() {
nextPrev(-1)
})
// this function handles the prv and next button clicks
// by using the dir (direction) parameter, that can be
// 1 (one) or -1 (negative one)
function nextPrev(dir) {
let index = 0
// iterating over the items, so we can find the index of
// the selected item in the list of the selector items
$('.lis').each(function(i, el) {
if ($(el).hasClass('selected_bkg')) {
index = i
}
})
// handling class changes (removing class and adding class
// to previous or next item)
if ((index + (1 * dir) >= 0) && (index + (1 * dir) < $('.lis').length)) {
$($('.lis')[index]).removeClass('selected_bkg')
$($('.lis')[index + (1 * dir)]).addClass('selected_bkg')
}
}.selected_bkg {
color: blue;
text-decoration: underline;
cursor: pointer;
}<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<button id="prv">Prev</button><button id="next">Next</button>
<div id="liid" hidden>1a</div>
<div id="uls">
<div class="">Category Fruits</div>
<ul>
<li class="lis selected_bkg" id="1a">Orange</li>
<li class="lis" id="2a">Apple</li>
<li class="lis" id="3a">Pear</li>
</ul>
<div class="">Category Vegitables</div>
<ul>
<li class="lis" id="1b">Carrot</li>
<li class="lis" id="2b">Cabbage</li>
<li class="lis" id="3b">Brocoli</li>
</ul>
<div class="">Category Meat</div>
<ul>
<li class="lis" id="1c">Beef</li>
<li class="lis" id="2c">Chicken</li>
<li class="lis" id="3c">Mutton</li>
</ul>
</div>基本思想是jQuery通过选择器创建一个对象列表。因此 $('.lis') 不仅是 ONE ELEMENT，而且是与此选择器匹配的所有元素 - 但为了便于使用，它指的是第一个元素当你这样写时发现。
由于 jQuery 对象实际上是一个列表，因此您可以使用 $.each() 对其进行迭代，并逐个元素执行操作。因此，您不必知道所选元素在 DOM 中的具体位置，只需知道它们是由选择器选择的即可。
我的代码片段中唯一缺少的是，您可以在第一个元素之前使用 prv ，在最后一个元素之后添加 next - 因此您需要为其添加“守卫” .
编辑
我完成了“守卫” - 您无法在第 1 项之前prv或在最后一项之后下一个。
关于javascript - HTML多个ul>li使用jquery来回遍历，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57579327/