Question

这类似于我的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>

“我有很多这样的未排序列表”

当我点击一个“.quickview-btn”div时，我应该得到next和previous（如果存在）“.quickview-btn”div的“data-pid”值，不管它们是否在下一个ul或以前的ul。

注意：我不能修改html结构，因为我做了许多其他操作，记住这个结构。所以我不能将所有的李放在一个ul。

我很无能为力，因为我是jQuery的新手。有人可以帮我吗？

Answer 1

您可以找到.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。 <{1}}最后为next。

undefined

Live Example | Live Source

在下面的评论中你说过：

...但是点击下一个最后一个“quickview-btn”没有获得第一个“quickview-btn”data-pid。我可以知道为什么会这样吗？

因为上面没有任何内容可以实现这种包装。它并没有神奇地发生。

如果你想包装：Live Example | Live Source

<!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>

Answer 2

在这里我尝试了这个，它对我有用。如果有完美的方式请告诉我。

$('.quickview-btn').on('click', function () {
var nextId = $(this).closest('.item').next('.item').find('.quickview-btn').data('pid');
var prevId = $(this).closest('.item').prev('.item').find('.quickview-btn').data('pid');

if(!nextId){
   nextId = $(this).closest('.products-grid').next('.products-grid').find('.quickview-btn').data('pid');
}
if(!prevId){
    $(this).closest('.products-grid').prev('.products-grid').find('.quickview-btn').each(function(){
        prevId = $(this).data('pid');
    });
}

console.log（prevId，nextId）; }）;

如何找到一个元素，无论其级别如何？

2 个答案: