Updated March 29, 2023
Definition on jQuery parent find
jQuery parent find a method of the specified element is returned by the parent() function, only a single level of the DOM tree is traversed by this approach.Parent() is similar to.parents(), except that.parent() only goes one step up the DOM tree. Optionally, the method accepts a selection expression of the same type as the $() function. If a selector is provided, the elements will be filtered based on whether they match or not. The parent() method returns the specified elements of the direct parent element. This approach only goes up one level in the DOM tree.
What is jQuery parent find?
- Use the parents() or parentsUntil() methods to go all the way up to the document’s root element.
- Use the children() or find() methods to traverse a single level down the DOM tree or all the way down to the last descendant.
Below is the syntax of the jQuery parent find method is as follows.
Syntax:
$(selector).parent (filter)- In a jQuery parent find syntax, the filter is an optional parameter used to specify the selector expression for parent search.
- Parent is the method is used to return the specified elements of direct element search. All ancestor elements of the selected element, all the way up to the document’s root element (html>), are returned by the parents () method.
- In jQuery, the parent() method retrieves all ancestor items of the specified selector. It’s a built-in jQuery function.
- This function explores the DOM tree upwards from the parent element, returning all ancestors of the specified element.
- Both the parent() and parents() methods traverse up the DOM tree and return the parent element.
- However, the parent() method traverses a single level up in the DOM tree and only returns the direct parent of the supplied selector, but the parents() method goes multiple levels up and returns all ancestors, including a grandparent, great-grandparent, and so on.
- If the filter parameter is left blank, this method will pick all ancestors of a collection of elements, starting with the immediate parent and progressing to html> and body>.
- To filter down the search result, it’s common to pass a selection phrase. In that they both traverse the DOM tree, this function is similar to nearest ().
- In jQuery, the parent() method is used to locate the parent element of the currently selected element. In jQuery, the parent() method returns the selected element after traversing a one-level up.
How does jQuery parent find works?
- Everything in an HTML document is represented as a Node object. The DOM tree is used to interact with a webpage and its resources.
- The DOM tree is organized with parent/sibling/child relationships between the various nodes.
- One of the most famous aspects of the jQuery library is DOM traversal. We can easily traverse the DOM tree using these traversal methods.
- Traversing is divided into three types, i.e., parents, children, and siblings. We must grasp the relationships between the elements of a DOM tree to get the most out of it. For all of these components, jQuery has a plethora of simple methods.
- The direct parent element of the selected element is returned by the jQuery parent() function.
- It’s a jQuery built-in function for locating the parent element of the currently selected element.
- This method returns the selected element after traversing a single level up the stack. When a parent is applied to a set of items, it returns a list of their immediate parents.
- Only one level of the HTML DOM tree is traversed with the parent() method. Additional filtering options are provided via the optional parameters, which can be used to limit down the traversal.
- Optionally, the jQuery parent find method accepts a selection expression of the same type as the $() function.
- If a selector is provided, the elements will be filtered based on whether or not they match it.
jQuery parent find examples
The below example shows, jQuery parent; find examples are as follows.
1) JQuery parent find an example to return each span direct parent element –
In the below example, we have defined border color as light grey and black. In ancestors, we need to define all the values.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * {
display: block;
border: 1px solid lightgrey;
color: black;
padding: 4px;
margin: 10px;
}
</style>
<script>
$(document).ready(function(){
$("span").parent().css({"color": "Black", "border": "1px solid Blue"});
});
</script>
</head>
<body>
<div class="ancestors">
<div style="width:500px;"> (jQuery-Parent-method)
<ul> (JQuery)
<li> (Parent)
<span>Method of JQuery</span>
</li>
</ul>
</div>
</body>
</html>
2) Using jQuery parent find a method, see the element of the paragraph using class –
The below example shows that a jQuery parent find a method to find the element of the paragraph using class as selected.
In the below example, we have defined the background color as red, and also we have defined the working color as black.
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div><p>Welcome to jQuery</p></div>
<div class="selected"><p>Example of jQuery parent find</p></div>
<script>$("p").parent(".selected").css ("background", "Red");</script>
</body>
</html>
3) JQuery parent find a method to return all ancestor elements –
The below example shows the jQuery parent find a method to return all ancestor elements are as follows.
- In the below example, we have defined border color as light grey and also defined color as light grey. In ancestors, we need to define all the values.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 4px;
margin: 10px;
}
</style>
<script>
$(document).ready (function (){
$("span").parent().css ({"color": "Black", "border": "1px solid Blue"});
});
</script>
</head>
<body class="ancestors"> (JQuery)
<div style="width:500px;"> (Parent)
<ul> (Find)
<li> (Method)
<span>JQuery</span>
</li>
</ul>
</div>
</body>
</html>
Conclusion
In jQuery, the parent() method is used to locate the parent element of the currently selected element. In jQuery, the parent() method returns the selected element after traversing a one-level up. The parent() method returns the specified elements of the direct parent element.
Recommended Articles
This is a guide to jQuery parent find. Here we discuss the definition, syntax, What is jQuery parent find, how to work, and Examples with code. You may also have a look at the following articles to learn more –
