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

【问题标题】：How to find an element regardless of its level?无论级别如何，如何找到一个元素？
【发布时间】：2013-06-08 09:25:01
【问题描述】：

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

注意：我不能修改 html 结构，因为我在做许多其他操作时都要牢记这个结构。所以我不能把所有的 li 放在一个 ul 中。

因为我是 jQuery 新手，所以我一无所知。谁能帮我解决这个问题？

【问题讨论】：

标签： javascript jquery html magento

【解决方案1】：

您可以像这样找到.products-grid divs 中的所有.quickview-btn 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>

Live Example | Live Source

在下面的 cmets 中你说过：

...但是单击最后一个“quickview-btn”的下一步不会获得第一个“quickview-btn”数据pid。我可以知道这是为什么吗？

因为上面没有任何内容来实现该包装。它不会神奇地发生。

如果你想换行：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');

【讨论】：

恐怕它不会从之前的ul中获取值。会吗？
@Shathish：已修复，对此感到抱歉。
@Shathish: prev & next 不会从当前父级中获取元素。所以，你不必担心这一点。
@TamilVendhan：我的印象是他确实希望他们这样做。
@T.J.克劳德：啊..我误会了。

【解决方案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); });

【讨论】：