Jquery 每次导航顺序，未定义的错误

Question

我想将我的导航与 jQuery 分开，但每个 returns 循环中的某些元素都未定义，它看起来像这样：

<ul class="list">
  <li class="list-item" data-post-id="100">
    <a href="#" data-next="105">Next</a>
    <a href="#" data-prev="100">Prev</a>
  </li>
  <li class="list-item" data-post-id="101">
    <a href="#" data-next="101">Next</a>
    <a href="#" data-prev="104">Prev</a>
  </li>
</ul>

<ul class="list">
  <li class="list-item" data-post-id="102">
    <a href="#" data-next="102">Next</a>
    <a href="#" data-prev="106">Prev</a>
  </li>
  <li class="list-item" data-post-id="103">
    <a href="#" data-next="103">Next</a>
    <a href="#" data-prev="100">Prev</a>
  </li>
</ul>

<ul class="list">
  <li class="list-item" data-post-id="104">
    <a href="#" data-next="105">Next</a>
    <a href="#" data-prev="104">Prev</a>
  </li>
  <li class="list-item" data-post-id="105">
    <a href="#" data-next="101">Next</a>
    <a href="#" data-prev="106">Prev</a>
  </li>
</ul>

这应该看起来像这样，第一个元素从最后一个元素获取上一个 ID，下一个元素从列表中的下一个元素获取下一个 ID。

<ul class="list">
  <li class="list-item" data-post-id="100">
    <a href="#" data-next="101">Next</a>
    <a href="#" data-prev="105">Prev</a>
  </li>
  <li class="list-item" data-post-id="101">
    <a href="#" data-next="102">Next</a>
    <a href="#" data-prev="100">Prev</a>
  </li>
</ul>

<ul class="list">
  <li class="list-item" data-post-id="102">
    <a href="#" data-next="103">Next</a>
    <a href="#" data-prev="101">Prev</a>
  </li>
  <li class="list-item" data-post-id="103">
    <a href="#" data-next="104">Next</a>
    <a href="#" data-prev="102">Prev</a>
  </li>
</ul>

<ul class="list">
  <li class="list-item" data-post-id="104">
    <a href="#" data-next="105">Next</a>
    <a href="#" data-prev="103">Prev</a>
  </li>
  <li class="list-item" data-post-id="105">
    <a href="#" data-next="100">Next</a>
    <a href="#" data-prev="104">Prev</a>
  </li>
</ul>

示例：https://jsfiddle.net/z0uyfmx6

控制台：

101next
undefinedprev
undefinednext
100prev
103next
undefinedprev
undefinednext
102prev
105next
undefinedprev
undefinednext
104prev

Answer 1

这是因为 next/prev 方法将只查找 previous/next 兄弟元素。因此在每个 ul 中，第一个 li 不会有前一个和最后一个下一个兄弟元素，因此它们将打印 undefined.

相反，您可以进行基于索引的查找，例如

jQuery(function($) {
  var pList = $('.list-item');
  pList.each(function(i, e) {
    var index = pList.index(this);
    var next = pList.eq(index + 1).attr('data-post-id');
    var prev = index == 0 ? undefined : pList.eq(index - 1).attr('data-post-id');

    snippet.log(prev + ':' + $(this).attr('data-post-id') + ':' + next)

  });
});

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li class="list-item" data-post-id="100">
    <a href="#" data-next="105">Next</a>
    <a href="#" data-prev="100">Prev</a>
  </li>
  <li class="list-item" data-post-id="101">
    <a href="#" data-next="101">Next</a>
    <a href="#" data-prev="104">Prev</a>
  </li>
</ul>

<ul class="list">
  <li class="list-item" data-post-id="102">
    <a href="#" data-next="102">Next</a>
    <a href="#" data-prev="106">Prev</a>
  </li>
  <li class="list-item" data-post-id="103">
    <a href="#" data-next="103">Next</a>
    <a href="#" data-prev="100">Prev</a>
  </li>
</ul>

<ul class="list">
  <li class="list-item" data-post-id="104">
    <a href="#" data-next="105">Next</a>
    <a href="#" data-prev="104">Prev</a>
  </li>
  <li class="list-item" data-post-id="105">
    <a href="#" data-next="101">Next</a>
    <a href="#" data-prev="106">Prev</a>
  </li>
</ul>

Jquery 每次导航顺序，未定义的错误

Jquery each navigation order, undefined error

html

each

jquery