.not()
.not( selector )
描述:从匹配的元素集合中删除元素。
- function一个用来测试集合中每个元素的函数。它接受两个参数,
index,就是元素在jQuery集合中的索引,还有element,就是该DOM元素。在函数内部,this引用当前DOM元素。
- selection类型:jQuery一个已有的jQuery对象,用来匹配所针对的当前元素集合中的元素。
给定一个jQuery对象,它代表一个DOM元素的集合,.not()方法根据匹配的元素的子集构造了一个新的jQuery对象。提供的选择器针对每个元素作测试;不匹配选择器的元素将包含在结果中。
设想一个网页上有一个简单的列表:
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
我们可以把这个方法应用到一个列表项集合中:
$( "li" ).not( ":even" ).css( "background-color", "red" );
这次调用的结果是第二项和第四项有了红色背景,因为它们不匹配该选择器(再次强调:even选择器和:odd选择器使用基于0的索引。)
删除特定元素
.not()方法的第二版本允许我们从匹配的集合中删除元素,假设我们之前已经用别的方法已经找到那些元素例如,假设我们我们的列表已经有一个项目应用了一个id:
<ul> <li>list item 1</li> <li>list item 2</li> <li id="notli">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
我们可以使用原生的JavaScript函数getElementById()取回第三个列表项,然后从jQuery对象中删掉它:
$( "li" ).not( document.getElementById( "notli" ) ) .css( "background-color", "red" );
这条语句改变了第一项、第二项、第四项、第五项的背景色。我们可以用一个简单的jQuery表达式来完成同样的工作,但是这个技术很有用,举个例子,在别的库提供了对纯DOM节点的引用的时候。
自从jQuery 1.4,.not()方法可以取用一个函数作为它的参数,与.filter()采用的方法相同。那个函数返回true的元素被排出在经筛选的集合外;所有其它的元素则包含在集合内。
示例
给不是绿色也不是蓝色的div添加一个边框。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>not demo</title>
<style>
div {
width: 50px;
height: 50px;
margin: 10px;
float: left;
background: yellow;
border: 2px solid white;
}
.green {
background: #8f8;
}
.gray {
background: #ccc;
}
#blueone {
background: #99f;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div></div>
<div id="blueone"></div>
<div></div>
<div class="green"></div>
<div class="green"></div>
<div class="gray"></div>
<div></div>
<script>
$( "div" ).not( ".green, #blueone" )
.css( "border-color", "red" );
</script>
</body>
</html>
演示结果
从所有的段落文本集合中删除id="selected"的元素。
$( "p" ).not( $( "#selected" )[ 0 ] );
从所有的段落文本集合中删除id="selected"的元素。
$( "p" ).not( "#selected" );
从所有的段落文本的总集合中删除所有匹配"div p.selected"的元素。
$( "p" ).not( $( "div p.selected" ) );