jquery - 用jquery选择不相邻的元素

Question

我有一个 html 文件，它的结构几乎是这样的：

<div id="text-container">
   <h1>Title 1</h1>
   <div class="text"></div>
   <div class="text"></div>
   <div class="text"></div>
   <div class="text"></div>
   <h1>Title 2</h1>
   <div class="text"></div>
   <div class="text"></div>
   <div class="text"></div>
   <h1>Title 3</h1>
   ...
 </div>

这些文件是动态构建的，因此标题和文本类 div 的数量可能会有所不同。我想要实现的是插入一个元素以便能够从一个标题跳转到下一个标题，所以我有点在 prev() 或 next() 之后，但元素不必是兄弟姐妹。

谁能指出我正确的方向？

在此先感谢您的帮助

Answer 1

如果您想要.next()超越下一个元素的功能，请尝试.nextUntil+.next

$("#text-container").click(function() {
    var $nextTitle = $(this).nextUntil("h1").next();
    alert($nextTitle.text());
});

Answer 2

这里是：使用一些三元运算符：（只需btn为您的.prev和.next按钮添加一个类）

演示

$('h1').each(function(){
   $(this).data('myTopPosition', $(this).position().top );
});

var howMany = $('h1').length;
var curr = 0; // zero based so the first 'H1' is actually '0'

function correct(){
    var corr = curr === -1 ? curr=howMany-1 : curr = curr%howMany;
}

$('.btn').click(function(){
  var whatBtn= $(this).hasClass('next') ? curr++ : curr-- ;
    correct();
    var goToPos = $('h1').eq(curr).data('myTopPosition');
    $('html, body').stop().animate({ scrollTop: goToPos },1500);
});