jQuery 過濾

語言: CN / TW / HK

jQuery 的過濾方法可以允許我們根據特定元素在一組元素中的位置來選擇該元素。關於 jQuery 過濾方法有以下幾種,前三種是最基本的方法,後兩種是其他方法,它們可以讓我們選擇與特定條件匹配或者是不匹配的元素:

方法 描述
first() 返回被選元素的首個元素
last() 返回被選元素的最後一個元素
eq() 返回被選元素中帶有指定索引號的元素
filter() 規定一個標準,不匹配這個標準的元素會被從集合中刪除,匹配的元素會被返回
not() 返回不匹配標準的所有元素

first()方法

first() 方法用於返回指定元素的第一個元素。

示例:

我們來看下面這個例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("li").first().css({"background-color":"pink"});
  });
</script>
</head>
<body>
  <h3>我最喜歡吃的水果</h3>
  <div class="my">
    <ul>
      <li>西瓜</li>
      <li>哈密瓜</li>
      <li>菠蘿</li>
      <li>水蜜桃</li>
      <li>草莓</li>
    </ul>
  </div>
  <div class="you">
    <p>你最喜歡吃的水果是什麼呢?</p>
  </div>
</body>
</html>

上述程式碼中,first() 方法會幫我們找到第一個 <li> 元素,並且通過 css() 方法將找到的第一個 <li> 元素背景顏色設定為粉色。效果如下所示:

last()方法

last()方法剛好與 first() 方法作用相反,用於返回指定元素的最後一個元素。

示例:

例如假設我們要找到最後一個 <li> 元素,可以像下面這樣寫:

$(function(){
    $("li").last().css({"background-color":"pink"});
});

效果如下所示:

eq()方法

eq() 方法用於返回一個具有特定元素的特定索引號的元素。需要注意的是,首個元素的索引號是從 0 開始,而不是 1。

示例:

例如在前面的示例中,一共有五個 <li> 元素,那麼第一個 <li> 元素的索引號為 0,第二個為 1,以此類推。

我們可以試著將索引號為 3<li> 元素背景顏色設定為粉色,程式碼如下所示:

$(function(){
    $("li").eq(3).css({"background-color":"pink"});
});

演示效果:

從上圖中我們可以很清楚的看出,索引號為 3 的元素為"水蜜桃"。

filter()方法

filter() 方法允許我們指定一個條件,與條件不匹配的元素將從選擇中刪除,並返回匹配的元素。

示例:

例如下面程式碼中,選出 class 屬性為 sweet<li> 元素,並將其背景顏色設定為粉色:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("li").filter(".sweet").css({"background-color":"pink"});
  });
</script>
</head>
<body>
  <h3>我最喜歡吃的水果</h3>
  <div class="my">
    <ul>
      <li class="sweet">西瓜</li>
      <li class="sweet">哈密瓜</li>
      <li>菠蘿</li>
      <li class="sweet">水蜜桃</li>
      <li>草莓</li>
    </ul>
  </div>
  <div class="you">
    <p>你最喜歡吃的水果是什麼呢?</p>
  </div>
</body>
</html>

演示效果:

not()方法

not() 方法返回所有與條件不匹配的元素。作用正好與 filter() 方法相反。

示例:

選出 class 屬性值不為 sweet<li> 元素:

$(function(){
    $("li").not(".sweet").css({"background-color":"pink"});
});

演示效果: