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>

工作正常＆amp;打印下一个3。当我点击Click的{{1}}项时，它给了我正确的3。

Answer 1

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

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

JQuery使用.next选择下一个.selector元素（＆＃39; .selector＆＃39;）

1 个答案: