2

私はほとんどこのように構造化された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（）の後のようなものですが、要素は兄弟である必要はありません。

誰かが私を正しい方向に向けてくれませんか？

よろしくお願いします

4

2 に答える 2

3

.next()次の要素を超える機能が必要な場合は、 .nextUntil+を試してください.next

$("#text-container").click(function() {
    var $nextTitle = $(this).nextUntil("h1").next();
    alert($nextTitle.text());
});
于 2012-07-16T21:59:50.653 に答える
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);
});
于 2012-07-16T22:06:14.547 に答える