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（）之后，但没有元素必须是兄弟。< / p>

任何人都可以指出我正确的方向吗？

提前感谢您的帮助

Answer 1

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

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

Answer 2

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

DEMO

$('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);
});

使用jquery选择非相邻元素

2 个答案:

DEMO