CODEWITHSUNDEEP
jqueryparent
Jasper vd Berg
Jasper vd Berg

Reputation: 81

jQuery access child of current parent

I'm new to jQuery and I'm trying to do the following: access the child of the current div's parent ( or in other words: another child of the current div's parent ). My code looks like this ( this is what I tried ):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
$(document).ready(function() {
    $("div.head").click(function() {
        $(this).parent().("div.content").slideToggle("normal"); //<- how?
    });
});
</script>

<div class="box">
<div class="head">
    Example
</div>
<div class="content">
    Content here.
</div>
</div>

I'm trying to do it this way because then I could just make more boxes the same way without having to add extra js to make it work for every box ( the toggle hide/show of each box's content).

Upvotes: 5

Views: 2873

Answers (6)

Shawn Chin
Shawn Chin

Reputation: 86844

If all you're interested in is the element immediately after, use happytime harry's solution which uses .next(), i.e.:

$(this).next(".content").slideToggle("normal");

If you're looking for something more general, use one of the following:

// Search for elements which are direct children of parent
$(this).parent().children(".content").slideToggle("normal");  

// Search for siblings (same as above, but will not include $(this))
$(this).siblings(".content").slideToggle("normal");

// Search within all descendents of parent
$(this).parent().find(".content").slideToggle("normal");

Upvotes: 4

gen_Eric
gen_Eric

Reputation: 227180

You can use .find .children to get the div.content:

$(document).ready(function() {
    $("div.head").click(function() {
        $(this).parent().children("div.content").slideToggle("normal");
    });
});

Or you can use .siblings:

$(document).ready(function() {
    $("div.head").click(function() {
        $(this).siblings("div.content").slideToggle("normal");
    });
});

Upvotes: 2

Jasper
Jasper

Reputation: 75993

If the two elements are on the same DOM level then you can use .siblings():

$(function() {
    $(".head").click(function() {
        $(this).siblings(".content").slideToggle("normal");
    });
});

Here is a demo: http://jsfiddle.net/L5kqs/1/

Your selector needed a .children() or a .find():

$(this).parent().children(".content").slideToggle("normal");

Also note that your selectors will perform faster if you omit the tag names. Only when there are a lot of DOM nodes to search through will that improve performance.

If you would like to read more about .siblings() this would be a good start: http://api.jquery.com/siblings

Upvotes: 4

Richard Banks
Richard Banks

Reputation: 2983

something like this should suffice

$(".head").bind("click", function(){
    $(this).parent().find(".content").slideToggle("normal");
})

Upvotes: 0

Amadeus
Amadeus

Reputation: 189

you could try

 $(document).ready(function() {
     $("div.head").click(function() {
         $(this).parent().find(".content").slideToggle("normal"); //<- how?
     });
 });

or use siblings

 $(this).siblings(".content").slideToggle("normal");

Upvotes: 3

mothmonsterman
mothmonsterman

Reputation: 2481

<script>
$(document).ready(function() {
    $("div.head").click(function() {
        $(this).next("div.content").slideToggle("normal"); //<- easy
    });
});
</script>

Upvotes: 6

Related Questions