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元素，因為中間沒有non-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
• ：第一