这类似于我的 last question . 抱歉，我不知道我是否可以编辑相同的问题。
这是我的要求。 我的 HTML 有以下部分
<ul class="products-grid">
<li class="item">
<div class="quickview-btn" data-pid="101" style="opacity: 0;">Quick View</div>
<!-- some other elements -->
</li>
<li class="item">
<div class="quickview-btn" data-pid="107" style="opacity: 0;">Quick View</div>
<!-- some other elements -->
</li>
<li class="item">
<div class="quickview-btn" data-pid="123" style="opacity: 0;">Quick View</div>
<!-- some other elements -->
</li>
<li class="item">
<div class="quickview-btn" data-pid="145" style="opacity: 0;">Quick View</div>
<!-- some other elements -->
</li>
“我有 n 个这样的未排序列表”
当我点击一个“.quickview-btn”div 时，我应该得到下一个和上一个(如果存在)“.quickview-btn”div 的“data-pid”值，不管它们在下一个 ul 中或以前的 ul。
note: I cannot modify the html structure as i do many other operations keeping this structure in mind. so I cannot put all the li's in a single ul.
因为我是 jQuery 的新手，所以我一无所知。谁能帮我解决这个问题？
最佳答案
你可以在 .products-grid divs 中找到所有 .quickview-btn div这个:
var btns = $(".products-grid .quickview-btn");
然后找到被点击的索引:
var index = btns.index(this);
然后你可以使用 -1 和 +1 来获取上一个和下一个，不管 ul 他们在:
var prev = btns.eq(index - 1).attr('data-pid');
var next = btns.eq(index + 1).attr('data-pid');
prev 将是第一个按钮的 undefined。 next 最后一个将是 undefined。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>Grid Clicks</title>
<style>
.quickview-btn {
display: inline-block;
text-decoration: underline;
color: blue;
}
</style>
</head>
<body>
<ul class="products-grid">
<li class="item">
<div class="quickview-btn" data-pid="101">Quick View</div>
101
</li>
<li class="item">
<div class="quickview-btn" data-pid="107">Quick View</div>
107
</li>
<li class="item">
<div class="quickview-btn" data-pid="123">Quick View</div>
123
</li>
<li class="item">
<div class="quickview-btn" data-pid="145">Quick View</div>
145
</li>
</ul>
<ul class="products-grid">
<li class="item">
<div class="quickview-btn" data-pid="201">Quick View</div>
201
</li>
<li class="item">
<div class="quickview-btn" data-pid="207">Quick View</div>
207
</li>
<li class="item">
<div class="quickview-btn" data-pid="223">Quick View</div>
223
</li>
<li class="item">
<div class="quickview-btn" data-pid="245">Quick View</div>
245
</li>
</ul>
<script>
(function($) {
$(".products-grid .quickview-btn").click(function() {
var btns = $(".products-grid .quickview-btn");
var index = btns.index(this);
var prev = btns.eq(index - 1).attr('data-pid');
var next = btns.eq(index + 1).attr('data-pid');
alert(
"You clicked: " + $(this).attr('data-pid') +
"\nPrev: " + prev +
"\nNext: " + next
);
});
})(jQuery);
</script>
</body>
</html>
在下面的评论中你说:
...but clicking next for last "quickview-btn" doesn't get first "quickview-btn" data-pid. May I know why is that?
因为上面没有任何内容来实现包装。它不会神奇地发生。
如果要换行:Live Example | Live Source
var btns = $(".products-grid .quickview-btn");
var index = btns.index(this);
var count = btns.length;
var prev = btns.eq((index + (count - 1)) % count).attr('data-pid');
var next = btns.eq((index + 1) % count).attr('data-pid');
关于javascript - 如何找到一个元素而不考虑其级别？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16998035/