Question

次の<div>は、現在のクラスと同じクラスで見つけることができます。

この<div>内側のボタンをいくつかクリックすると私は同じ「ヘルプ」クラスで次の<div>を選択するとき、私は今、class="help"と<div>を持っています。

<div class="help"> 
    <div>....OTHER HTML CONTENT......<div> 
    <input type='submit' class='ok'> 
</div> 
<div>....OTHER HTML CONTENT......<div> 
<div class="help"></div> 
<div>....OTHER HTML CONTENT......<div> 
<div>....OTHER HTML CONTENT......<div> 
<div>....OTHER HTML CONTENT......<div> 
<div class="help"></div> 
<div>....OTHER HTML CONTENT......<div> 
<div class="help"></div> 

Answer 1

がnextAll()と:first

例えばの組み合わせを使用するように：

$("div.help").click(function() { 
    var nextDiv = $(this).nextAll("div.help:first") 
}); 

next()のみ即時兄弟を検索しますが。

<div></div> <-- if you are here 
<div></div> <-- .next() will check this 
<div></div> <-- but nothing further on 

もちろん、next()とループの組み合わせを使用できます。同じレベルで、すなわち要素 -

// pseudo-code 
while element is not div.help, element = element.next() 

EDIT

next()とnextAll()は兄弟を検索します。たとえば：

<div> <-- calling nextAll() from here will search: 
    <div></div> x not this 
</div> 
<div> <-- this 
    <div></div> x not this 
</div> 
<div></div> <-- this 

だから、それはマルチレベルのレイアウトで動作するように取得するには、まずあなたが1つ以上のレベル「上向き」をナビゲートすることを可能にするparent()とparents()のいくつかの組み合わせを、使用する必要があります。

parent()は、1つ上のレベルに横断します：

<div> <-- this is the parent() 
    <div></div> <-- of this element 
</div> 

をだからあなたの特定の例では、ボタンから始まる、あなたは他の<div class='help'>と同じレベルにあるので、使用した後、1つのレベル上を通過したいですnextAll()次のdivを見つける。

もちろん仮定し

<div class="help"> // $(this).parent() 
    <div>....OTHER HTML CONTENT......<div> 
    <input type='submit' class='ok'> // $(this) is your starting point 
</div> 
<div>....OTHER HTML CONTENT......<div> 
<div class="help"></div> // $(this).parent().nextAll("div.help:first") 

、あなたが入力のクリックイベントを処理している：あなたのEDITと新しい要求を1として

$("input.ok").click(function() { 
    $(this); // in this scope the $(this) refers to the submit button 
}) 

Answer 2

.next() - マッチした要素の集合の各要素の直後の兄弟を取得します。セレクタが提供されている場合は、そのセレクタに一致する場合にのみ次の兄弟を取得します。

例：

<ul> 
    <li>list item 1</li> 
    <li>list item 2</li> 
    <li class="third-item">list item 3</li> 
    <li>list item 4</li> 
    <li>list item 5</li> 
</ul> 


$('li.third-item').next().css('background-color', 'red'); 

EDIT：

.nextAll()：必要に応じてセレクタによってフィルタリングマッチした要素の集合内の各要素の全て次の兄弟を取得します。

あなたのケースで

$('div.help').nextAll(''div.help:first).css('background-color', 'red'); 

Answer 3

demo here

$(document).ready(function() { 
    $(".help").click(getNextHelp); 
}); 

function getNextHelp() { 
    var nextHelp = $(this).nextAll("div.help:first"); 
    if(nextHelp.length) { 
     alert(nextHelp.html()); 
    } else { 
     alert("that's the last help"); 
    } 
} 

-

demo here

うまく

$(document).ready(function() { 
    $(".help :button").click(getNextHelp); 
}); 

function getNextHelp() { 
    var nextHelp = $(this).parent().nextAll("div.help:first"); 
    if (nextHelp.length) { 
     nextHelp.css("background", "red"); 
    } else { 
     alert("that's the last help"); 
    } 
} 

Answer 4

、いくつかの基本的なスクリプトを提供し、アンドリューHaywayによって作られたCLSの古典ハンドラ& &サイモン・ウィリソン

function cls(c,tag){ 
    var r=[]; 
    var reg=new RegExp("(^|\s)"+c+"($|\s)"); 
    var e=document.getElementsByTagName(tag||"*"); 
    for(var i=0;i<e.length;i++){ 
     if(e[i].className.match(reg)) 
     r.push(e[i]); 
    } 
    return r; 
} 
var helps=cls('help','div'); 
for(var i=0;i<helps.length;i++){ 
    helps[i].onclick=function(){ 
     var next_index=helps.indexOf(this)+1; 
     if(helps[next_index]){ 
      //here is the next dom with the class help 
      var next=helps[next_index]; 
      //then your code... 
     } 
    } 
}