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