jQuery 遍歷 is() 方法

jQuery 參考手冊(cè) 遍歷

is() 根據(jù)選擇器、元素或 jQuery 對(duì)象來(lái)檢測(cè)匹配元素集合，如果這些元素中至少有一個(gè)元素匹配給定的參數(shù)，則返回 true。

1. 語(yǔ)法

.is(selector)

與其他篩選方法不同，.is() 不創(chuàng)建新的 jQuery 對(duì)象。相反，它允許我們?cè)诓恍薷?jQuery 對(duì)象內(nèi)容的情況下對(duì)其進(jìn)行檢測(cè)。這在 callback 內(nèi)部通常比較有用，比如事件處理程序。

假設(shè)我們有一個(gè)列表，其中兩個(gè)項(xiàng)目包含子元素：

<ul>
  <li>list <strong>item 1</strong></li>
  <li><span>list item 2</span></li>
  <li>list item 3</li>
</ul>

您可以向 <ul> 元素添加 click 處理程序，然后把代碼限制為只有當(dāng)列表項(xiàng)本身，而非子元素，被點(diǎn)擊時(shí)才進(jìn)行觸發(fā)：

$("ul").click(function(event) {
  var $target = $(event.target);
  if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }
});

現(xiàn)在，當(dāng)用戶點(diǎn)擊的是第一個(gè)列表項(xiàng)中的單詞 "list" 或第三個(gè)列表項(xiàng)中的任何單詞時(shí)，被點(diǎn)擊的列表項(xiàng)會(huì)被設(shè)置為紅色背景。不過(guò)，當(dāng)用戶點(diǎn)擊第一個(gè)列表項(xiàng)中的 item 1 或第二個(gè)列表項(xiàng)中的任何單詞時(shí)，都不會(huì)有任何變化，這是因?yàn)檫@上面的情況中，事件的目標(biāo)分別是 <strong> 是 <span>。

請(qǐng)您注意，對(duì)于帶有位置性選擇器的選擇器表達(dá)式字符串，比如 :first、:gt() 或者 :even，位置性篩選是針對(duì)傳遞到 .is() 的 jQuery 對(duì)象進(jìn)行的，而非針對(duì)包含文檔。所以對(duì)于上面的 HTML 來(lái)說(shuō)，諸如 $("li:first").is("li:last") 的表達(dá)式返回 true，但是 $("li:first-child").is("li:last-child") 返回 false。

2. 使用函數(shù)

該方法的第二種用法是，對(duì)基于函數(shù)而非選擇器的相關(guān)元素的表達(dá)式進(jìn)行求值。對(duì)于每個(gè)元素來(lái)說(shuō)，如果該函數(shù)返回 true，則 .is() 也返回 true。例如，下面是稍微復(fù)雜的 HTML 片段：

<ul>
  <li><strong>list</strong> item 1 one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong> -
    two <span>strong tags</span></li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

您可以向每個(gè) <li> 添加 click 處理程序，以計(jì)算在被點(diǎn)擊的 <li> 內(nèi)部 <strong> 元素的數(shù)目：

$("li").click(function() {
  var $li = $(this),
    isWithTwo = $li.is(function() {
      return $('strong', this).length === 2;
    });
  if ( isWithTwo ) {
    $li.css("background-color", "green");
  } else {
    $li.css("background-color", "red");
  }
});

3. 范例

返回 false，因?yàn)?input 元素的父元素是 p 元素：

  var isFormParent = $("input[type='checkbox']").parent().is("form");
  $("div").text("isFormParent = " + isFormParent);

jQuery 參考手冊(cè) 遍歷