jQuery access child of current parent

Question

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

mothmonsterman · Accepted Answer · 2011-12-13 16:54:46Z

6

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

answered Dec 13, 2011 at 16:54

mothmonsterman

2,4913 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jasper vd Berg Over a year ago

Thank you, wouldn't think it was that easy :D. Works perfectly.

Jasper · Accepted Answer · 2011-12-13 17:02:39Z

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

@happytimeharry: I'm pretty sure no one cares about IE6 support.
@happytimeharry I just tested with a virtual image of windows XP with IE 6 and no tags in the selectors works fine. I always test my code against IE 6 and I've never had a problem omitting tag names.
@Jasper my bad... its 5.5 and it something im forced to be concerned with... docs.jquery.com/Known_Issues
Thanks for the answer and extra explanation, helped me a lot and works like a charm.

Community · Accepted Answer · 2017-05-23 12:20:12Z

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

find bad: use children, we dont care about all descendants.. siblings bad: use next, we only care about the next sibling not more than one
Thanks for putting together the possible approaches, helps me on my way of getting a better understanding of jQuery.
You're very welcome @jasper. Good luck and have fun with jQuery.

Amadeus · Accepted Answer · 2011-12-13 16:58:22Z

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

gen_Eric · Accepted Answer · 2011-12-13 17:05:03Z

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

Richard Banks · Accepted Answer · 2011-12-13 17:01:29Z

something like this should suffice

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

Collectives™ on Stack Overflow

jQuery access child of current parent

6 Answers 6

1 Comment

5 Comments

3 Comments

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

5 Comments

3 Comments

Comments

2 Comments

Comments

Related