Menu
Why does this work:
$('.button_30').click(function(){ $(this).closest('.portlet').find('.portlet_content').text("foo"); }); any why does this not work:
$('.button_30').click(function(){ $(this).parent('.portlet').find('.portlet_content').text("foo"); }); where the html looks something like this:
<div class="portlet portlet_30"> <div class="portlet_header portlet_header_30"> header content here </div> <div class="portlet_sub_header portlet_sub_header_30"> <input type="text" class="textbox_30" /> </div> <div class="portlet_content portlet_content_30"> results go here </div> <div class="portlet_footer portlet_footer_30"> <input type="button" class="button_30" /> </div> </div> <div class="portlet portlet_30"> <div class="portlet_header portlet_header_30"> header content here </div> <div class="portlet_sub_header portlet_sub_header_30"> <input type="text" class="textbox_30 /> </div> <div class="portlet_content portlet_content_30"> results go here </div> <div class="portlet_footer portlet_footer_30"> <input type="button" class="button_30" /> </div> </div> 
609
The closest() method returns the first ancestor of the selected element. An ancestor is a parent, grandparent, great-grandparent, and so on. The DOM tree: This method traverse upwards from the current element, all the way up to the document's root element (<html>), to find the first ancestor of DOM elements.
parents() and . parent() methods are similar, except that the latter only travels a single level up the DOM tree. Also, $( "html" ). parent() method returns a set containing document whereas $( "html" ).
The closest( selector ) method works by first looking at the current element to see if it matches the specified expression, if so it just returns the element itself. If it doesn't match then it will continue to traverse up the document, parent by parent, until an element is found that matches the specified expression.
The parent() method returns the direct parent element of the selected element. The DOM tree: This method only traverse a single level up the DOM tree. To traverse all the way up to the document's root element (to return grandparents or other ancestors), use the parents() or the parentsUntil() method.
Because parent() will return the parent (immediate ancestor) only if it matches the selector specified.
However, closest() will search all ancestors and return the first one that matches the selector.
As the parent of button_30 is a div, whose parent is the div with the class of portlet, the parent() function is not matching it and returning an empty set, where-as closest() is matching it.
To complete the set of similar methods here you have parents(), which is like closest() but doesnt stop at the first matched element; it returns all ancestors which match the selector.
123
.parent() only looks at the immediate ancestor.
.closest() looks at all ancestors, as well as the originating element, and returns the first match.
.parents() looks at all ancestors, and returns all matches.
42
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
