如何找到一个元素而不论其级别如何？

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 。

注意：我无法修改html结构，因为我在进行其他许多操作时都牢记了该结构。 所以我不能把所有的李都放在一个ul里。

我一无所知，因为我刚接触jQuery。 有人可以帮我吗？

Answer 1

您可以在.quickview-btn .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>

现场示例 | 现场直播

在下面的评论中，您已经说过：

...但是单击下一个“ quickview-btn”最后一个不会获得第一个“ quickview-btn”数据-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');

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 个解决方案

解决方案1
6 已采纳 2013-06-08 09:27:23

解决方案2
0 2013-06-08 09:36:03

如何找到一个元素而不论其级别如何？

问题描述

2 个解决方案

解决方案1 6 已采纳 2013-06-08 09:27:23

解决方案2 0 2013-06-08 09:36:03

解决方案1
6 已采纳 2013-06-08 09:27:23

解决方案2
0 2013-06-08 09:36:03