Sha*_*ish 2 html javascript jquery magento
这与我的上一个问题类似.对不起我不知道我是否可以编辑同样的问题.
所以这是我的要求.我的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>
"我有很多这样的未分类列表"
当我点击一个".quickview-btn"div时,我应该得到next和previous(如果存在)".quickview-btn"div的"data-pid"值,无论如何,他们是在下一个ul或之前的ul .
注意:我无法修改html结构,因为我做了许多其他操作,牢记这个结构.所以我不能将所有的li都放在一个ul中.
我很傻,因为我是jQuery的新手.有人可以帮我这个吗？
你可以找到.quickview-btn div里面的所有内容,.products-grid divs如下所示:
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>
在下面的评论中你说过:
...但是点击下一个最后的"quickview-btn"并没有获得第一个"quickview-btn"data-pid.我可以知道为什么吗？
因为上面没有任何内容可以实现这种包装.它并没有神奇地发生.
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');