Updated March 30, 2023
Introduction to jQuery parents
In jQuery, parents() is an in-built method which is defined as a method for traversing DOM tree by traveling upwards in the tree towards the great grandfather, grandfather, etc., elements, and these are returned for any particular selected element which is specified in the parents() function. So, in general, we can define the parents() function as a function that traverses level up in the DOM tree for returning all the ancestors element for the matched or selected element, which is given in the parents() function and is also similar to parent() function but the parents() function returns all the ancestors element whereas parent() function returns only the direct parent element.
Syntax:
$(selector ).parents(filter_expr)Or
$(selector).parents()In the above-given syntax, the jQuery parents() function is applied on a particular element. It is a selector tag where all ancestors are returned when this parent () function is applied to this selector tag. This function does not take any parameters, but still, it is considered optional.
- selector: In this, the selector is nothing, but it is an HTML element or tag of which we want the element’s ancestors or grandparent element to be returned.
- filter_expr: This is an optional parameter in this function for specifying the selector tag expression to look upwards in the DOM tree for searching with all this selector’s ancestors.
How parents() Function Works with Examples
- In jQuery, the parents() function is a built-in function for displaying all the ancestors of the selected HTML tag for which this function needs to be applied. The working of this function is very simple Firstly, it will check for the specified selector tag, followed by the period (dot) operator and the parents() method to this selector tag. This function will traverse the entire DOM tree, where this tree is the representation of elements of the jQuery object.
- Therefore parents() function traverses this DOM tree in the upward direction to search all the element’s ancestors such as grandparent element, great grandparent element, etc. are all displayed, which means this function parent () returns all the ancestor elements of the particular selected or matched HTML tag that is specified before the function declaration, and this particular specified selector optionally filters it. This function returns the element set in reverse order for the given multiple DOM having the original set, and the duplicate elements are removed and displayed.
Example #1
Code:
<html>
<head>
<title> Demonstration of the parents() function in jQuery </title>
<style>
.parents_func_body* {
display: block;
border: 2px solid red;
color: red;
padding: 5px;
margin: 15px;
}
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("p").parents().css({
"color": "blue",
"border": "2px solid red"
});
});
</script>
</head>
<body class="parents_func_body">
<div style="width:500px;"> This div element is the great grand parent of the selected paragraph p element.!
<ol> This ol element is the grand parent of the selected paragraph p element.!
<ul> This ul element is the parent of the selected paragraph p element.!
<p> This is the selected paragraph p element.! </p>
</ul>
</ol>
</div>
</body>
</html>Output:
In the above example, we have first made the document ready for the web page to be displayed according to the given function in the above code. In this, we are using the .ready() function for making the document ready. Then we specify the parents() function in which “p” the paragraph tag as a selector for this function, which means this function returns all the ancestor elements of the element “P” in the above code. Finally, we are applying the .css() function to properly display each element with described properties. This logic is defined or declared within the script tag, which is within the head tag.
Now in the body tag, we will use the class name as declared in the head tag to describe the body tag’s properties. In the above code, we have first declared the “div” tag, which makes it a great grandparent of the element “p.” Similarly, without ending the “div” tag within this, we are declaring another element “ol,” which makes it a grandparent of element “p,” then within this “ol” tag, we are declaring the “ul” tag, which makes it a parent of element “p” and then within this “ul” tag we are declaring the “p” tag which is the element made as selector tag for the parents() function and then all these above tags are closed in the order as </p>, </ul>, </ol> and </div> and lastly we close the body and HTML tags too. The output shows the exact display in the above screenshot.
Example #2
Now let us see another example for demonstrating the parents() function in which we are passing the optional parameters as some other HTML elements or selectors.
Code:
<!DOCTYPE html>
<html>
<head>
<title> Demonstration of parents() function with optional parameters. </title>
<style>
.main *{
border: 2px solid red;
padding: 10px;
margin: 10px;
}
</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function parents_func(){
$(document).ready(function(){
$("p").parents("li, h2").css({ "border": "3px dashed blue"});
});
}
</script>
</head>
<body class = "main"> This is the main body
<div> div - It is first element
<li> li - It is second element
<h2> h2 - It is third element
<div> div - It is the forth element
<p> Paragraph - It is fifth element
</p>
</div>
</h2>
</li>
</div>
<button onclick = "parents_func()"> click me ! </button>
</body>
</html>Output:
In the above example, the code is similar to the first code, but here the only difference is we are passing multiple elements or selector tags as optional parameters to this parents() function so that we can distinguish the elements according to the specified elements. In this code, we have specified <li> and <h2> tags as parameters, and we have also specified the property saying when the button is clicked, these parameters are highlighted with a blue dotted border, and the rest elements border in red color. The output in the above screenshots shows the use of optional parameters.
Conclusion – jQuery parents
In this article, we conclude that the parents() function in jQuery is very simple and is used to search or traverse the DOM tree, which consists of various elements to find out the parent element to help any developer to easily correct or upgrade any details. Similar to this parent () function, which returns all its ancestors elements of any selected element, even the parent() function also returns the direct parent element but not all the ancestors elements.
Recommended Articles
This is a guide to jQuery parents. Here we discuss the introduction and how parents() function works with examples, respectively. You may also have a look at the following articles to learn more –
