:Parent Selector in jQuery
In jQuery, the :parent selector is a content filter selection that has a special function in choosing components according to their content. In the Document Object Model (DOM) structure of a web page, it assists you in locating elements that include other nodes.
What is the Selector?
To choose any element with at least one child node, use the :parent selector. Thus, an element will be regarded as a “parent” by this selector and will be chosen if it contains any other elements, text, or even comments. It is the opposite of the :empty selector, which chooses node elements.
Syntax:
The simple :parent selector syntax is:
$(':parent')It can also be used with other selections to narrow your decision. Use the following to select only parent div elements:
$('div:parent')How it Works
jQuery examines the DOM for child nodes in each element using the :parent selector. The broad notion of “child nodes,” which includes HTML elements, text nodes, whitespace (such as tabs and line breaks), and comments, makes :parent work.
This is a summary of how it works:
Detects any child: A comment (), plain text, or another HTML tag ( <p>, <span>, etc.) will all be matched by the :parent selector if an element contains any content inside its opening and closing tags.
Distinction from :empty: Essentially the inverse of :parent, the :empty selector matches components that have no child nodes. An element is therefore :parent if it is not :empty.
Performance consideration:The efficient selection of items is crucial even when jQuery streamlines DOM traversing and manipulation. Knowing that :parent must examine an element’s content can provide insight into how it functions, even though the don’t go into great depth about how it performs.
Separating the :parent filter from the :has(selector) filter is crucial. Whereas :parent only determines whether any child nodes exist, :has(selector) determines whether an element contains a particular descendant element that corresponds to the supplied selector. For instance, div elements with a p tag would be selected by $(‘div:has(p)’), while div elements with anything (a p tag, plain text, etc.) would be selected by $(‘div:parent’).
Code Example
The usage of the :parent selector is seen in the code example below. This illustration has a red border around objects that are designated as “parents.”
<!DOCTYPE html>
<html>
<head>
<title>:parent Selector Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
div, p {
border: 1px solid #ccc;
padding: 10px;
margin: 5px;
}
.highlight-parent {
border: 2px solid red !important;
}
</style>
</head>
<body>
<h2>jQuery :parent Selector Example</h2>
<div id="div1">
<p>I'm inside div1</p>
</div>
<div id="div2">
Just some text.
</div>
<div id="div3">
<!-- Only a comment -->
</div>
<div id="div4"></div> <!-- Completely empty -->
<p id="p1">Paragraph with <span>span</span></p>
<p id="p2">Just text</p>
<p id="p3"> </p> <!-- Whitespace -->
<p id="p4"></p> <!-- Empty -->
<script>
$(document).ready(function() {
$('div:parent, p:parent').addClass('highlight-parent');
});
</script>
</body>
</html>Output:
jQuery :parent Selector Example
I'm inside div1
Just some text.
Paragraph with span
Just text
Note: The jQuery library is from a Content Delivery Network (CDN), a popular and dependable method of supplying script libraries that are utilised by the general audience. This example also follows the standard practice of including external styling definitions inside an HTML style> tag. $(document).ready() ensures that JavaScript code runs only after page loading and DOM construction. This avoids jQuery errors when working with unrendered items.
Explanation of the Code
$(‘div:parent, p:parent’) is the jQuery code used in the example.The addClass(‘highlight-parent’); function focusses on div and p components that are considered “parents.”
Let’s look at how each piece is affected by this:
- \div id=”div1″> ~p>…</b> This div has a <p> element inside it. It will get the red border because it is a parent element because it has a child element.
- \div id=”div2″> Here is just some text. The </div> has a text node (“Just some text here.”). This div will get the red border since it is also a parent since text nodes are considered children.
- \div id=”div3″> The only content in this div is a remark –> There is a comment node in this div. The red border will be applied to this div since comment nodes are also considered children.
- Id=”div4″>: This empty div has no child components, comments, or content. The red border will not apply to it as it is not a parent. The :empty selector will select it.
- \p id=”p1″>… <span>…</span>…</p>: To this p element belongs a span element. The red border will be applied to it since it is a parent.
- \p id=”p2″>This paragraph is just text.This p element has a text node inside it. The red border will be applied to it since it is a parent.
- \p id=”p3″> Only whitespace is present in this p element. The DOM views whitespace as a text node, therefore this p element is also a parent and will get the red border.
- \p id=”p4″></p>: This p element, like div4, is entirely empty. It will not be given the red border because it is not a parent.
This example makes it very evident that the :parent selection is quite inclusive, matching any element that has any type of child content, including comments or whitespace.