:Has Selector in jQuery
Utilising a custom jQuery selector called :has(selector), elements can be chosen based on whether a descendant element fits a given selector. By acting as a strong filter, it enables you to limit a collection of components to just those that have a specific hierarchical structure or topic.
Syntax:
The following is the :has(selector)’s basic syntax:
$( "parentSelector:has(descendantSelector)" )- parentSelector: This determines the aspects you wish to take into account first.
- :has selector (): The custom jQuery selector looks like this.
- To be included in the final result, the child or descendant element must be present within the parentSelector element. This selector is known as the descendantSelector.
To choose all div elements that have at least one p (paragraph) element as a descendent, for example, div:has(p).
How it Works
The :has(selector) filtering preserves just those elements with a descendant (child, grandchild, etc.) that matches the selector expression enclosed in parenthesis from the current set of matched elements.
Initial Selection: A standard selector (such as tr for table rows) is used to define a set of elements by first.
Internal Check: Next, jQuery internally determines whether each element in this initial collection has any descendant elements that match the descendantSelector you supplied to:features().
Filtering: A parentSelector set element is retained in the result if it has a corresponding descendent. The result set eliminates it if it has no corresponding descendent.
The difference between using a descendant selector like “parentSelector descendantSelector” and :has(selector) must be understood:
- $(“div p”): This chooses every <p> element that came from a div element. This result set is made up of the actual p elements.
- “div:has(p)” picks all <div> elements with a <p> element as descendants. Not p elements, but div elements are the result set.
Performance Considerations: Standard CSS selectors are more efficient than :has selector , a custom jQuery selector, at using the browser’s native DOM selector engine (.querySelectorAll()). Accordingly, employing :has selector may result in a “loop-and-test” process for intricate situations or very large documents, which can be more expensive in terms of performance than native DOM tools. Sizzle is one optimisation that jQuery uses to speed up selector processing, however it could be forced to loop and test every element if a selector expression contains a custom jQuery selector, such as :has selector ().
Code Example
Suppose you have a table with news items and you need to process only rows that include actual data, usually represented by (table data) fields, and filter out rows that are only headers (such as calendar years).
<!DOCTYPE html>
<html>
<head>
<title>:has() Selector Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
div {
border: 1px solid gray;
padding: 10px;
margin: 10px;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Example of :has() Selector</h2>
<div>This is a plain div without paragraph.</div>
<div><p>This div contains a paragraph.</p></div>
<div><span>This div contains a span, not a paragraph.</span></div>
<div><p>Another div with a paragraph.</p></div>
<script>
// Highlight only those <div>s that contain a <p> element
$("div:has(p)").addClass("highlight");
</script>
</body>
</html>Output:
Example of :has() Selector
This is a plain div without paragraph.
This div contains a paragraph.
This div contains a span, not a paragraph.
Another div with a paragraph.Explanation of the Code
HTML Structure:
- Basic HTML setup with jQuery CDN inclusion.
- CSS defines styling for div elements and a highlight class (yellow background).
- Four div elements are present, two of which contain <p> tags.
jQuery Script:
- $(“div:has(p)”): Selects all div elements that contain a <p> descendant.
- .addClass(“highlight”): Applies the highlight CSS class to the selected divs.
Conclusion
The jQuery :has selector is a powerful custom selector that lets developers choose parent components depending on their child or descendant elements. This lets you filter structured HTML to target just items that fulfil particular structural constraints. In this example, $(“div:has(p)”) chooses <div> components with at least one <p> tag and highlights them to differentiate them from others.
Traditional descendant selectors like $(“div p”) only return child components, but this method gives additional control. Due to its manual loop-and-test processes, :has selector () may be less efficient than native DOM selectors, especially in large or complicated pages. However, it is quite flexible and useful for nested content. Therefore, :has selector () can ease many DOM manipulation jobs, but it should be utilised carefully to optimise efficiency.