javascript - JQuery 使用 .next ('.selector' 选择下一个 .selector 元素)

Question

我的 HTML:

<ul>
   <li class="select-me"><b>1</b> <span>Click</span></li>
   <li>2</li>
   <li class="select-me"><b>3</b> <span>Click</span></li>
   <li>4</li>
</ul>

我的JS:

$(function() {
   $('ul li span').on('click', function() {
      var previousSelectMe = $(this).parent().prev('.select-me');
      var nextSelectMe = $(this).parent().next('.select-me');

      console.log(nextSelectMe.find('b').text(), previousSelectMe.find('b').text());
   });
});

现在我的代码略有不同，但这是主要逻辑。我遇到的问题是我无法获取 NEXT .select-me 元素，因为中间没有 select-me 元素。因此，使用上面的代码，下一个元素未定义。

如果我将 HTML 结构更改为:

<ul>
   <li class="select-me"><b>1</b> <span>Click</span></li>
   <li class="select-me"><b>3</b> <span>Click</span></li>
   <li>2</li>
   <li>4</li>
</ul>

工作正常并打印 3 进行下一步。当我点击 3 的 Click 项目时，它会给出正确的之前的 1。

Answer 1

如果你想获取下一个元素，即使它不相邻，你可以使用它:

.nextAll('.select-me:first');
.prevAll('.select-me:first');

• nextAll
• prevAll
• :first