Detailed explanation of:has(selector) selector in jQuery-JS Tutorial-php.cn

Detailed explanation of:has(selector) selector in jQuery

黄舟

Release： 2017-06-23 11:26:56

Original

1787 people have browsed it

Overview

Match elements that contain elements matched by the selector

Parameters

selectorSelectorV1.1.4

Copy after login

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>

Copy after login

jQuery Code:

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

Copy after login

Result:

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

Copy after login

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)")

Copy after login

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")

Copy after login

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>

Copy after login

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>

Copy after login

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!