个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试使用“下一个”/“上一个”按钮遍历多个列表。我的方法适用于单个列表。我无法找到最初选择的列表下方或上方的列表的 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/
24
4
0
我正在编写两个程序，一个用 C++ 编写，另一个用 Python 编写，以使用 unix 域套接字相互通信。我想做的是让 C++ 代码向 Python 代码发送一个数字，Python 代码又将另一个数
我希望有一个生成器函数，它返回一条线上的点，给定一个最小距离 k。这很简单，可以使用 numpy 完成，如下所示: points = np.linspace(start, end, k) 但是，我想生
根据我的理解，我们一直在用 Git 做一个非常标准的分支模型的项目，描述如下:http://nvie.com/posts/a-successful-git-branching-model/ 我们从“m
我有一张图片，我想单击它以动画形式旋转 90 度，当它再次单击时我希望它以动画形式旋转 -90 度。 对于使用 css3 变换的旋转 im: -moz-transform:rotate(90deg);
我正在尝试将 拖放 Logo 到 2 个 SVG 圆圈 中。在我的代码的帮助下，图像被拖到一个圆圈中，但没有被拖到另一个圆圈中。 如何修改code这样图像可以在两个圆圈之间拖/放？ function
我正在使用 python 3.5.2、pandas 0.18.1 和 sqlite3。 在我的数据库中，我有一个列 unix_time 和 INT 自 1970 年以来的秒数。理想情况下我想从 sql
我已经在我的服务器上安装了 SSL。我的问题是如何通过 acegi 插件在选定的 Controller /页面上强制使用 https。 Acegi 插件支持一个属性 forcehttps，当设置为 t
这是我第一次发布查询。我需要帮助。感谢您的帮助。 我同意我已经把我的概率作为一个长篇故事。但很抱歉，我不知道如何缩短它，我的目的是提供有关我的问题的完整信息。 问题:我必须在 Windows 平台上使
我是一名优秀的程序员,十分优秀！