Updated March 13, 2023
Definition on jQuery parent with class
The jQuery parent with class method allows us to search through the parents of a jQuery object representing a set of DOM elements in the DOM tree and create a new jQuery object from the matching elements. The parent() and parents() methods are nearly identical, with the exception that the latter only travels one level 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 or not they match it.
jQuery parent with class overviews
- The jQuery class selector selects all components which have a particular class. The class attribute of an HTML element is referred to as the class attribute.
- The jQuery parent class is used to specify the class of an element that is being selected.
- There should be no number at the start. Several HTML components are styled using it. To pick sections, or elements, of an HTML page, jQuery employs CSS-style selectors.
- Then we may use jQuery methods or functions to do something with the jQuery components.
- Type a dollar sign followed by parenthesis to use one of these selectors $(). The jQuery() function is abbreviated as jQuery.
- Put the element we would like to choose inside the parenthesis. Single or double quotes are both acceptable. Then, following the parentheses, put a dot after the technique we want to employ.
- Class and ID selectors in jQuery are similar to CSS selectors. The ID selector in CSS is used to apply styles to a specific HTML element.
- An HTML element’s ID attribute must match the CSS ID selector. Unlike classes, which can be applied to several components across a site, a unique ID can only be applied to one element.
- CSS ID properties will take precedence over CSS Class properties. Write a hash (#) character followed by the element’s id to pick it.
How to find jQuery parent with class?
There are two approaches to find the jQuery with class are as follows. First, with the help of the class name, we can determine the parent class of an element in an HTML.
Approach 1
- The closest() method is basically used to return the items of the first ancestor. If the ancestor class exists, it will return the name of the class; otherwise, it will return not exist.
- The on() method is used to choose an event handler for a group of components. Then, when the user presses the button, the function is called.
Approach 2
- The event handler for selected components is chosen using the on() method. Then, when the user presses the button, the function is called.
- The parent() method is used to get all the specified items’ ancestors. If the ancestor class exists, it returns the name of the class; otherwise, it returns not exist.
- Approach 1 and 2 are used to find the jQuery parent class.
Parent element using jQuery
- jQuery is a free Javascript framework that facilitates interactions between HTML and CSS documents.
- The selector eq into the parent’s technique can help to simplify things. We only need to know our level to use it. If we don’t need to know the parent node’s class.
- Parents () return an array of children from the real parent node to the HTML node, parents() return an array of children. To get the nth parent, call the parents method with the argument eq (n-1)” (0-indexed).
- The closest() method scans the DOM tree for these items and their ancestors and creates a new jQuery object from the elements that match the test of the element itself.
- It works its way up through the DOM’s element predecessors, returning the first one that matches the selector that we gave as input.
- The parent() method traverses the DOM tree to the immediate parent of each of these elements and constructs a new jQuery object from the matched elements, given a jQuery object representing a group of DOM elements.
- This technique is similar to parents() with the exception that parent() only goes up one level in the DOM tree.
- Optionally, the method takes a selection expression of the same type as the $() function. If a selector is given, the elements are filtered by seeing if they match it.
- The parent() method is used to find the immediate parent element. This function locates the specified element’s parent element.
- This parent() method returns the specified element after traversing one or more higher levels.
JQuery parent class name examples
The below example shows an example of the jQuery parent name class is as follows.
1) jQuery parent name class with the closest method –
The below example shows the jQuery parent name class with the closest method are as follows. The closest method is used to get the first ancestor element.
Code:
<!DOCTYPE html>
<html>
<head>
<title> JQuery parent class</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:Red;">
JQuery parent class
</h1>
<p id="GFG_UP" style=
"font-size: 15px; font-weight: Medium;">
</p>
<div class="parent">
<div class="child"></div>
</div>
<button>
Click on this button
</button>
<p id="GFG_DOWN" style=
"color: Red; font-size: 20px; font-weight: Medium;">
</p>
<script>
$('#GFG_UP').text('Click on below button');
$('button').on('click', function() {
var object = $('.child').closest('.parent');
if (object.length) {
$('#GFG_DOWN').text("Child class name = child"
+ " Parent Class Name = parent" + " Exists");
}
else {
$('#GFG_DOWN').text("Class not exist");
}
});
</script>
</body>
</html>
2) jQuery parent with the class to get all matching ancestor elements –
The below example shows the jQuery parent with the class to get all matching ancestor elements.
Code:
<!DOCTYPE html>
<html>
<head>
<title> JQuery parent class </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:Red;">
JQuery parent class
</h1>
<p id="GFG_UP" style=
"font-size: 15px; font-weight: Medium;">
</p>
<div class="parent">
<div class="child"></div>
</div>
<button>
Click on this button
</button>
<p id="GFG_DOWN" style=
"color: Red; font-size: 20px; font-weight: medium;">
</p>
<script>
$('#GFG_UP').text('Click on below button');
$('button').on('click', function() {
var object = $('.child').closest('.parent');
if (object.length) {
$('#GFG_DOWN').text("Child class name = child"
+ " Parent Class Name = parent" + " Exists");
}
else {
$('#GFG_DOWN').text("Class not exist");
}
});
</script>
</body>
</html>
Conclusion
The parent class is used to apply a specific style to a group of HTML elements. For example, the jQuery parent with class method allows us to search through the parents of a jQuery object representing a set of DOM elements in the DOM tree and create a new jQuery object from the matching elements.
Recommended Articles
This is a guide to jQuery parent with class. Here we discuss the definition, overviews, How to find jQuery parent with class? Examples, code. You may also have a look at the following articles to learn more –
