返回值:jQuerynot(selector)
从匹配的元素集合中移除指定的元素。
-
1.0 新增not(selector)
selector (Selector) 用于匹配元素的选择器表达式字符串。 -
1.0 新增not(elements)
elements (Elements) 将要从匹配的元素集合中被移除的一个或多个 DOM 元素。 -
1.4 新增not(function(index))
function(index) (Function) 用于测试集合中每个元素的函数。this
代表当前的 DOM 元素。 -
1.4 新增not(jQuery object)
jQuery object (Object) 用于匹配当前元素集合中的一个已经存在的 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');
上述语句会改变第 1, 2, 4 和 5 列表项的背景色。我们当然可以使用一个简单的 jQuery 表达式来完成相同的操作,不过这种用法有时还是很有用的,如果我们还使用了其它返回结果是 DOM 节点的 JavaScript 库的话。
从 jQuery 1.4 开始,.not()
方法的参数还可以是一个参数,就像 .filter()
方法那样。如果该函数返回 true
,那么当前元素就不会包含在结果中。
示例:
为不是绿色或蓝色的 div 添加边框。
<!DOCTYPE html>
<html>
<head>
<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="jquery.min.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" 的元素。
jQuery 代码:
$("p").not( $("#selected")[0] )
示例:
从段落集合中移除 ID 是 "selected" 的元素。
jQuery 代码:
$("p").not("#selected")
示例:
从段落集合中移除满足 "div p.selected" 的元素。
jQuery 代码:
$("p").not($("div p.selected"))