Question

How can I find the next <div> with the same class as the current one.

I have a <div> with class="help", now when some clicks on a button inside this <div> I want to select the next <div> with the same “help” class.

<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

Use a combination of nextAll() and :first

e.g.:

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

next() will only search the immediate sibling.

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

You can of course, use a combination of next() and a loop, e.g.

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

EDIT

next() and nextAll() will only search siblings — ie elements on the same level. For example:

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

So to get it to work with a multi-level layout, you need to first use some combination of parent() and parents(), which allow you to navigate one or more levels ‘upwards’.

parent() will traverse one level up:

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

So in your particular example, starting from the button, you want to traverse one level up so you are on the same level as the other <div class='help'>, then use nextAll() to find the next 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")

Assuming of course, you are handling the click event of the input:

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