jQuery 遍歷 not() 方法-學(xué)習(xí)JQuery-JavaScript編程-碩編程

首頁(yè) ? JavaScript編程 ? 學(xué)習(xí)JQuery

jQuery 遍歷 not() 方法

not() 從匹配元素集合中刪除元素。

1. 語(yǔ)法 1

.not(selector)

參數(shù)	描述
selector	字符串值，包含用于匹配元素的選擇器表達(dá)式。

2. 語(yǔ)法 2

.not(element)

參數(shù)	描述
element	一個(gè)或多個(gè)需要從匹配集中刪除的 DOM 元素。

3. 語(yǔ)法 3

.not(function(index))

參數(shù)	描述
function(index)	用于檢測(cè)集合中每個(gè)元素的函數(shù)。this 是當(dāng)前 DOM 元素。

如果給定一個(gè)表示 DOM 元素集合的 jQuery 對(duì)象，.not() 方法會(huì)用匹配元素的子集構(gòu)造一個(gè)新的 jQuery 對(duì)象。所應(yīng)用的選擇器會(huì)檢測(cè)每個(gè)元素；不匹配該選擇器的元素會(huì)被包含在結(jié)果中。

請(qǐng)思考下面這個(gè)帶有簡(jiǎn)單列表的頁(yè)面：

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

我們可以向列表項(xiàng)集應(yīng)用該方法：

$('li').not(':even').css('background-color', 'red');

這次調(diào)用的結(jié)果是將項(xiàng)目 2 和 4 設(shè)置為紅色背景，這是因?yàn)樗鼈儾黄ヅ溥x擇器（回憶一下，:even 和 :odd 均使用基于 0 的 index）。

4. 移除具體的元素

.not() 方法的第二個(gè)版本允許我們從匹配集中刪除元素，假設(shè)我們之前已經(jīng)通過(guò)其他手段找到了這些元素。例如，設(shè)想一個(gè)列表已經(jīng)將 id 應(yīng)用到其中一個(gè)項(xiàng)目中：

<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 函數(shù) getElementById() 讀取第三個(gè)列表項(xiàng)，然后把它從 jQuery 對(duì)象中刪除：

$('li').not(document.getElementById('notli')).css('background-color', 'red');

這條語(yǔ)句改變項(xiàng)目 1、2、3 和 5 的背景色。我們可以用更簡(jiǎn)單的 jQuery 表達(dá)式來(lái)完成同樣的事情，但是這項(xiàng)技術(shù)在比方說(shuō)其他庫(kù)提供對(duì)純 DOM 節(jié)點(diǎn)的引用時(shí)會(huì)很有用。

對(duì)于 jQuery 1.4，.not() 方法能夠采用函數(shù)作為其參數(shù)，與 .filter() 方法相同。其函數(shù)返回 true 的元素會(huì)被排除在過(guò)濾集之外；所有其他元素將被包含其中。