3.6 篩選器及 Traversing

以下範例，直接在 practice/selectors.html 頁面中測試觀察：

篩選器 Filters

.first()

找到的所有項目中的第一個。例：

$("p").first().css("color", "red");

.last()

找到的所有項目中的最後一個。

$("p").last().css("color", "red");

.eq(n)

第幾個元素，從 0 開始，0 代表第一個。以此類推。

-1 代表倒數第一個；-2 代表倒數第二個。以此類推。

$("p").eq(0).css("color", "red"); // 第 1 個

$("p").eq(1).css("color", "red"); // 第 2 個

$("p").eq(-1).css("color", "red"); // 倒數第 1 個

$("p").eq(-2).css("color", "red"); // 倒數第 2 個

.slice(start, last)

從索引值開始(start)，到最後的索引值(last)，但並不包含最後一個。

如果 last 沒有提供，就是直接取到最後一個。

// 從索引值 1 到 3，但不包含 3
$("p").slice(1, 3).css("color", "red");

// 從索引值 1，然後到最後一個
$("p").slice(1).css("color", "red");

.is()

用來判斷是否符號指定的規則。

console.log($("#my_title").is("h1")); // true
console.log($("#my_title").is("p")); // false

console.log($("#my_title").is(":nth-child(2)")); // true
console.log($("#my_title").is(":nth-child(3)")); // false

Traversing

.prev()、.next()

在 practice/selectors.html 新增以下原始碼：

<p id="p1">段落1</p>
<p id="p2">段落2</p>
<p id="p3">段落3</p>

例：同層前一個

$("#p2").prev().css("color", "red");

例：同層下一個

$("#p2").next().css("color", "red");

.closest(el)

在 practice/selectors.html 頁面中，新增以下原始碼：

<div id="outer_div">
  <div id="inner_div">
    <p>段落</p>
    <ol id="ol_list">
      <li id="i1">項目一</li>
      <li id="i2">項目二</li>
      <li id="i3">項目三</li>
    </ol>
  </div>
</div>

例：往父層找，找到第一個符合 el 的元素：

$("#i1").closest("div").css("border", "1px solid red");

.children()

例：找到第一層子元素

$("#outer_div").children().css("border", "1px solid red");

$("#ol_list").children().css("border", "1px solid red");

例：找到第一層子元素為 p 標籤的元素：

$("#inner_div").children("p").css("border", "1px solid red");

.find(el)

例：一直往內層找(不只是第一層子元素)，找到所有的 p 標籤的元素：

$("#outer_div").find("p").css("border", "1px solid red");

$("#outer_div").find("li").css("border", "1px solid red");

參考

jQuery Traversing

jQuery Filtering