CODEWITHSUNDEEP
jquerycss-selectors
krsunny
krsunny

Reputation: 15

jQuery select next div by class

I have the following HTML:

<div class="row">
<div class="fourcol "> <a class="getNote" id="1" href="#">Create a Skybox</a> </div>
<div class="fourcol "> <a class="getNote" id="2" href="#">Add images to sky box</a> </div>
<div class="fourcol last"> <a class="getNote" id="3" href="#">Delete a sky box</a> </div>
<div class="row">
    <div class="twelvecol noteDetails"></div>
</div>
<div class="fourcol "> <a class="getNote" id="4" href="#">Change a skybox</a> </div>
<div class="fourcol "> <a class="getNote" id="5" href="#">Cool a skybox</a> </div>
<div class="fourcol last"> <a class="getNote" id="6" href="#">Hey a skybox</a> </div>
<div class="row">
    <div class="twelvecol noteDetails"></div>
</div>
<div class="fourcol "> <a class="getNote" id="7" href="#">one more</a> </div>
<div class="row">
    <div class="twelvecol">
        <div class="noteDetails"></div>
    </div>
</div>

How do I select the first div with noteDetails class?

I have tried:

$('#1').closest("div.noteDetails").html('test');

but it doesn't work.

Edit: What I really want to do is for example if I click on the link with id 4 then I want to update the closest .noteDetails (which in this case is the second .noteDetails)

Upvotes: 1

Views: 8368

Answers (6)

tasmaniski
tasmaniski

Reputation: 4898

Try this:

$("#1").next(".noteDetails").html("test");

Upvotes: 0

gnarf
gnarf

Reputation: 106332

What you are asking for is actually a little more difficult because of the way you have your HTML setup. You are also missing a lot of closing tags here...

Its much easier to search for things if they are direct siblings. Adding another class on the .row divs that contain the details like a class="row rowDetails" will make this a little easier.

This would find the next one using your current HTML though.

$( "a.getNote" ).click( function( event ) {
    // traverse up to the "row"
    var noteDetails = $( this ).closest(".row")
    // find the next siblings that contain a .noteDetails
            .nextAll().has( ".noteDetails" )
    // limit to the first match
            .first()
    // and then find the .noteDetails it contained
            .find(".noteDetails");
});

If you were to change the HTML as I suggested, you can replace the .nextAll().has( ".noteDetails" ) with .nextAll( ".rowDetails" ) instead. Using a class for a selector to nextAll() will be much faster than having to filter with .has().

Upvotes: 0

Arindam
Arindam

Reputation: 998

$("div .noteDetails").first();

Gives you the div class="row"

Put this somewhere to test, adding some extra class to each of the noteDetails classes to see if the right one is selected

document.write($("div .noteDetails").first().attr("class"));

This should print only the class name of your desired div and none else.

So to test, add a class first to the first noteDetails div and a class second to the next one and so on.

It should display twelveCol noteDetails first as the output.

Upvotes: 0

jerjer
jerjer

Reputation: 8760

$('div.noteDetails').filter(':first')

Upvotes: 1

Abdullah Jibaly
Abdullah Jibaly

Reputation: 54790

Are you trying to do:

$("div.noteDetails").first()

Upvotes: 3

ComfortablyNumb
ComfortablyNumb

Reputation: 3501

$("div.noteDetails:first").html('test');

Upvotes: 0

Related Questions