6

:has() Selector | jQuery API Documentation

 3 years ago
source link: https://api.jquery.com/has-selector/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

has selector

Description: Selects elements which contain at least one element that matches the specified selector.

  • version added: 1.1.4jQuery( ":has(selector)" )

    selector: Any selector.

The expression $( "div:has(p)" ) matches a <div> if a <p> exists anywhere among its descendants, not just as a direct child.

Additional Notes:

  • Because :has() is a jQuery extension and not part of the CSS specification, queries using :has() cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use $( "your-pure-css-selector" ).has( selector/DOMElement ) instead.

Example:

Adds the class "test" to all divs that have a paragraph inside of them.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>has demo</title>
<style>
.test {
border: 3px inset red;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div><p>Hello in a paragraph</p></div>
<div>Hello again! (with no paragraph)</div>
<script>
$( "div:has(p)" ).addClass( "test" );
</script>
</body>
</html>

Demo:


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK