Answer: Use the jQuery find() Method You can use the find() method to get the children of the $(this) selector using jQuery. The jQuery code in the following example will simply select the child <img> element and apply some CSS style on it on click of the parent <div> element.
jQuery children() Method The children() method returns all direct children of the selected element. The DOM tree: This method only traverse a single level down the DOM tree. To traverse down multiple levels (to return grandchildren or other descendants), use the find() method.
If You want to get list only children elements with id or class, avoiding elements without id/class, You can use document. getElementById('container'). querySelectorAll('[id],[class]'); ... querySelectorAll('[id],[class]') will "grab" only elements with id and/or class.
The best way with the HTML you have would probably be to use the next
function, like so:
var div = $(this).next('.class2');
Since the click handler is happening to the <a>
, you could also traverse up to the parent DIV, then search down for the second DIV. You would do this with a combination of parent
and children
. This approach would be best if the HTML you put up is not exactly like that and the second DIV could be in another location relative to the link:
var div = $(this).parent().children('.class2');
If you wanted the "search" to not be limited to immediate children, you would use find
instead of children
in the example above.
Also, it is always best to prepend your class selectors with the tag name if at all possible. ie, if only <div>
tags are going to have those classes, make the selector be div.class1
, div.class2
.
In the click event "this" is the a tag that was clicked
jQuery('.class1 a').click( function() {
var divToSlide = $(this).parent().find(".class2");
if (divToSlide.is(":hidden")) {
divToSlide.slideDown("slow");
} else {
divToSlide.slideUp();
}
});
There's multiple ways to get to the div though you could also use .siblings, .next etc
This is a lot simpler with .slideToggle():
jQuery('.class1 a').click( function() {
$(this).next('.class2').slideToggle();
});
EDIT: made it .next instead of .siblings
http://www.mredesign.com/demos/jquery-effects-1/
You can also add cookie's to remember where you're at...
http://c.hadcoleman.com/2008/09/jquery-slide-toggle-with-cookie/
http://jqapi.com/ Traversing--> Tree Traversal --> Children
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With