.not()| jqueryAPI 2.2 中文手册- AspRain.cn 致力于Web开发技术翻译整理

jQuery API 2.2.0

.not()

分类:遍历 > 筛选 | 遍历 > 杂项遍历

返回: jQuery

.not( selector )

描述:从匹配的元素集合中删除元素。

加入于: 1.0
.not( selector )
  • selector
    类型:Selector or Element or Array
    一个字符串,它包含了一个选择器表达式、一个DOM元素,或者一个元素数组,用来针对集合作匹配。
加入于: 1.4
.not( function )
  • function
    类型:FunctionInteger index, Element element ) => Boolean
    一个用来测试集合中每个元素的函数。它接受两个参数,index,就是元素在jQuery集合中的索引,还有element,就是该DOM元素。在函数内部,this引用当前DOM元素。
加入于: 1.4
.not( selection )
  • 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" ) );

如果网页上不能运行示例,请点击http://www.asprain.cn/jQueryAPI/not.htm查看示例。

如果你觉得本文档对你有用,欢迎给翻译作者支付宝打赏,支持翻译作者源源不断翻译更多有用的技术文档。