Menu
html:
<style>
hidden { display:none;}
</style>
<div id="div1">
<a href="#" onclick="expandSiblingParagraphs(this)">+</a>
<p>Hello</p>
<p class="hidden">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Integer vulputate, nibh non rhoncus euismod, erat odio pellentesque lacus,
sit amet convallis mi augue et odio. Phasellus cursus urna facilisis quam.
Suspendisse nec.</p>
<p class="hidden">Another hidden paragraph</p>
</div>
The Javascript I am trying:
var expandSiblingParagraphs = function(elt){
$(this).parent()....?
};
I want to select all P's that are children of the clicked element's parent, and remove the hidden class from them. In the logic I don't want to assume anything about the id of the containing div, or even that there is a containing div. I just want all P children of the parent container.
How do I do that?
In the selector syntax, I can find a way to get descendants or children. I can't find a way to select parents or ascendants. Am I missing something? thanks.
761
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.
jQuery children() method is used to get the direct children of the selected HTML element. You can use children() method to traverse through the child elements of the selected parent element.
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.
The ("parent > child") selector selects all elements that are a direct child of the specified element.
$(this).parent().children("p.hidden").removeClass("hidden");
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
