jQuery 遍歷 - 過濾

使用jQuery，我們可以輕松地從DOM元素列表中過濾掉各種元素。

在本章中，我們將說明如何縮小對(duì)DOM樹中元素的搜索范圍。

過濾DOM樹

我們有以下jQuery方法，用于根據(jù)特定元素在一組元素中的位置來選擇它們：

• first()

• last()

• eq()

• filter()

• not()

• has()

• is()

下面將向您展示如何使用每種方法。

jQuery first()方法

jQuery first()方法返回所選元素的第一個(gè)元素。

以下示例突出顯示了第一段：

$(document).ready(function(){
  $("p").first().css("background", "coral");
});

jQuery last()方法

jQuery last()方法返回所選元素的最后一個(gè)元素。

以下示例突出顯示了最后一段：

$(document).ready(function(){
  $("p").last().css("background", "coral");
});

jQuery eq()方法

jQuery eq()方法返回具有選定元素的特定索引號(hào)的元素。

索引號(hào)始終從0開始，因此第一個(gè)數(shù)字將具有索引0（而不是1）。

下面的示例選擇第三段（索引號(hào)2）：

$("button").click(function(){
  $("p").eq(2).css("background-color", "red");
});

jQuery filter()方法

jQuery filter()方法返回與特定條件匹配的元素。

此方法過濾掉所有不符合所選條件的元素，并且將返回那些匹配項(xiàng)。

下面的示例返回所有類名為“ demo”的段落：

$(document).ready(function(){
  $("p").filter(".demo").css("background", "coral");
});

下面的示例返回所有偶數(shù)列表項(xiàng)：

$(document).ready(function(){
  $("li").filter(":even").css("background", "coral");
});

jQuery not()方法

jQuery not()方法返回不符合特定條件的元素。

此方法與該filter()方法相反。

下面的示例返回所有不具有類名稱“ demo”的段落：

$(document).ready(function(){
  $("p").not(".demo").css("background", "coral");
});

jQuery has()方法

jQuery has()方法返回與指定選擇器匹配的所有元素，其中包含一個(gè)或多個(gè)元素。

以下示例返回其中包含<span>元素的所有段落：

$(document).ready(function(){
  $("p").has("span").css("background-color", "coral");
});

jQuery is()方法

jQuery is()方法檢查所選元素之一是否與給定參數(shù)匹配。

如果這些元素中的至少一個(gè)與給定參數(shù)匹配，則此方法將返回true，否則返回false。

下面的示例檢查<p>的父級(jí)是否為<div>元素：

$(document).ready(function(){
  $("p").parent().is("div");
});

jQuery遍歷參考

有關(guān)完整的遍歷方法參考，請(qǐng)?jiān)L問我們的jQuery遍歷參考。