Menu
I am trying to understand the difference between find() and closest() in jquery. Following is my simple code with jquery. *This is just a dummy form. I just want to understand the difference between them. So don't think what am I going to do with this simple form. *
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function myFunction(){
var form = $("div#d1").find("form").attr("action");
var form1 = $("div#d1").closest("form").attr("action");
alert(form+form1);
}
</script>
</head>
<body>
<div id="d1">
<p id="p1">Click on this paragraph.</p>
<p id="p2">Click on this paragraph.</p>
<form id="f1" action="aaa">
<input type="text" value="submit">
</form>
<form id="f2" action="bbbbb">
<input type="text" value="submit">
</form>
<form id="f3" action="ccb">
<input type="text" value="submit">
</form>
<input type="submit" value="submit" onclick="myFunction()">
</div>
</body>
</html>
When I click on my submit button, var form1 value is showing as undefined. Can anyone tell me why it is showing as undefined? Also when I should use closest() and find().
529
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.
jQuery find() Method The find() method returns descendant elements of the selected element. A descendant is a child, grandchild, great-grandchild, and so on. The DOM tree: This method traverse downwards along descendants of DOM elements, all the way down to the last descendant.
closest() The closest() method of the Element interface traverses the element and its parents (heading toward the document root) until it finds a node that matches the specified CSS selector.
jQuery next() Method The next() method returns the next sibling element of the selected element. Sibling elements are elements that share the same parent. The DOM tree: This method traverse forward along the next sibling of DOM elements.
closest() is to go up the tree, into the parents, including the current element. find() is going down the tree looking in the childs, and the childs of childs:
var form1 = $("input").closest("form").attr("action");
FIND
Description: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
Example:
$(selector1).find(selector2) search the decedent of the selector1 element and return all elements that match selector2.
CLOSEST
Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
EXAMPLE
$(selector1).closest(selector2) selects the element selector1 and then traverses the dom upwards and returns the first element that matches the selector2
26
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
