CODEWITHSUNDEEP
jquery
aWebDeveloper
aWebDeveloper

Reputation: 38352

Find the next div with the same class as the clicked div

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>

Upvotes: 2

Views: 7871

Answers (4)

user122211
user122211

Reputation: 493

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
})

Upvotes: 6

Praveen Lobo
Praveen Lobo

Reputation: 7187

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");
    }
}

As per your EDIT and new request -

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");
    }
}

Upvotes: 0

james li
james li

Reputation: 184

well, provide some basic scripts, the classic handler of cls made by Andrew Hayway && Simon Willison

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...
        }
    }
}

Upvotes: 0

Pranay Rana
Pranay Rana

Reputation: 176906

.next() - Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

Example :

<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() : Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.

So that in your case 

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

Upvotes: 3

Related Questions