jQuery 遍歷 is() 方法

jQuery 參考手冊 遍歷

is() 根據選擇器、元素或 jQuery 對象來檢測匹配元素集合，如果這些元素中至少有一個元素匹配給定的參數，則返回 true。

1. 語法

.is(selector)

與其他篩選方法不同，.is() 不創建新的 jQuery 對象。相反，它允許我們在不修改 jQuery 對象內容的情況下對其進行檢測。這在 callback 內部通常比較有用，比如事件處理程序。

假設我們有一個列表，其中兩個項目包含子元素：

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

您可以向 <ul> 元素添加 click 處理程序，然后把代碼限制為只有當列表項本身，而非子元素，被點擊時才進行觸發：

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

現在，當用戶點擊的是第一個列表項中的單詞 "list" 或第三個列表項中的任何單詞時，被點擊的列表項會被設置為紅色背景。不過，當用戶點擊第一個列表項中的 item 1 或第二個列表項中的任何單詞時，都不會有任何變化，這是因為這上面的情況中，事件的目標分別是 <strong> 是 <span>。

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

2. 使用函數

該方法的第二種用法是，對基于函數而非選擇器的相關元素的表達式進行求值。對于每個元素來說，如果該函數返回 true，則 .is() 也返回 true。例如，下面是稍微復雜的 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>

您可以向每個 <li> 添加 click 處理程序，以計算在被點擊的 <li> 內部 <strong> 元素的數目：

$("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，因為 input 元素的父元素是 p 元素：

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

jQuery 參考手冊 遍歷