Home > Article > Web Front-end > Detailed explanation of:has(selector) selector in jQuery

Detailed explanation of:has(selector) selector in jQuery

黄舟Original: 2017-06-23 11:26:561699browse

Overview

Match elements that contain elements matched by the selector

Parameters

selectorSelectorV1.1.4

A selector for filtering

Example

Description:

Add a text class to all div elements containing p elements

HTML code:

<div><p>Hello</p></div> <div>Hello again!</div>

jQuery Code:

$("div:has(p)").addClass("test");

Result:

[ <div class="test"><p>Hello</p></div> ]

The definition of this selector may be a bit confusing. In layman’s terms, it means that if an element contains a selector (selector), it matches element, then this element will be matched. For example:

$("div:has(p)")

The above selector will match div elements containing p elements.
This selector is generally used in conjunction with other selectors, such as Class selector and Element selector, etc. For example:

$("div:has(p)").css("color","blue")

The above code sets the font color in the div element containing the p element to blue.
If not used with other selectors, the default state is used with the * selector, for example, $(":has") is equivalent to $("*:has").

Parameter list:

Parameter .

Example code:

Example 1:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title></title>
<style type="text/css">
div 
{
  border:1px solid green;
  height:50px;
}
span{border:1px solid blue;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("button").click(function(){ 
    $("div:has(span)").css("border","1px solid red") 
  }) 
}) 
</script>
</head>
<body>
<div>我不含span</div>
<div> <span>我是span</span></div>
<button>点击查看效果</button>
</body>
</html>

The above code can set the border color of the div containing the span element to red.

Example 2:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title></title>
<style type="text/css">
div 
{
  border:1px solid green;
  height:50px;
}
span{border:1px solid blue;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("button").click(function(){ 
    $("*:has(span)").css("border","1px solid red") 
  }) 
}) 
</script>
</head>
<body>
<div>我不含span</div>
<div><span>我是span</span></div>
<p><span>我是span</span></p>
<button>点击查看效果</button>
</body>
</html>

Since the above code does not specify a selector used in conjunction with the :has selector, so It is used with the * selector by default, so the above code can set the border color of all elements containing all span elements to red.

The above is the detailed content of Detailed explanation of:has(selector) selector in jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of examples of jQuery :empty selectorNext article：Detailed explanation of examples of jQuery :empty selector

See more

Detailed explanation of:has(selector) selector in jQuery

Related articles