Traversing-Filtering
Traversing Filtering 的方法有
.eq()、.filter()、.first()、.has()、.is()、
.last()、.map()、.not()、.slice()
一、.eq()
其結果跟Selectors-Basic Filter的 :eq() Selector 是一樣的，
都是用來找尋第n個元素(zero-based)。
只不過一個是jQuery method，另一個是jQuery Selectors Extensions。
註：「:eq() Selector」在 jQuery 3.4 已被 deprecated 了。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> </head> <body> <ul> <li class="first-item">list item 1</li> <li class="second-item">list item 2</li> <li class="third-item">list item 3</li> <li class="fourth-item">list item 4</li> <li class="fifth-item">list item 5</li> </ul> <script> console.log($("li").eq(1)); </script> </body> </html>
結果為
二、.filter()
根據 selector 所找出的結果，再利用 .filter(selector) 繼續二次平面找尋。
有四種多載方法
1、.filter( Selector selector )
例如：$( "li" ).filter( ":even" )
2、.filter( Function function )
例如：
$("li").filter(function (index) { return $("strong", this).length === 1; }).css("background-color", "red");
3、.filter( Element elements )
4、.filter( jQuery selection )
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> </head> <body> <ul class="level-1"> <li class="item-i">I</li> <li class="item-ii"> II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b"> B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li> </ul> </body> </html>
$(".level-1>li").filter(".item-ii");
結果為
可以跟 .find() 方法比較
三、.first()
其結果跟Selectors-Child Filter的 :first-child Selector 是一樣的，
都是用來選擇第一個子元素。
四、.has()
其結果跟Selectors-Content Filter的 :has() Selector 是差不多的，
找出指定元素底下是否擁有某元素。
有兩個多載方法
.has( Selector selector )
.has( Element element)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>has demo</title> <style> .full { border: 1px solid red; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <ul><li>Does the UL contain an LI?</li></ul> <script> $("ul").append("<li>" + ($("ul").has("li").length ? "Yes" : "No") + "</li>"); $("ul").has("li").addClass("full"); </script> </body> </html>
五、.is()
用來判斷某條件是否成立。
有四種多載方法
1、.is( Selector selector )
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.0.0.js"></script> <meta name="viewport" content="width=device-width"> </head> <body> <ul> <li>list <strong>item 1</strong></li> <li><span>list item 2</span></li> <li>list item 3</li> </ul> <script> $("ul").click(function (event) { var target = $(event.target); if (target.is("li")) { target.css("background-color", "red"); } }); </script> </body> </html>
用來判斷event.target是否有包含該元素。
2、.is( Function function )
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://code.jquery.com/jquery-3.0.0.js"></script> </head> <body> <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> <script> $("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"); } }); </script> </body> </html>
判斷條件交由function來判斷。
3、.is( jQuery selection )
4、.is( Element elements )
六、.last()
其結果跟Selectors-Child Filter的 :last-child Selector 是一樣的，
都是用來選擇最後一個子元素。
七、.map()
將selector選到的集合再經由.map()自訂function組出新的jQuery object。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.0.0.js"></script> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <form method="post" action=""> <fieldset> <div> <label for="two">2</label> <input type="checkbox" value="2" id="two" name="number[]"> </div> <div> <label for="four">4</label> <input type="checkbox" value="4" id="four" name="number[]"> </div> <div> <label for="six">6</label> <input type="checkbox" value="6" id="six" name="number[]"> </div> <div> <label for="eight">8</label> <input type="checkbox" value="8" id="eight" name="number[]"> </div> </fieldset> </form> <p></p> <script> var aWord = $(":checkbox").map(function () { return this.id; }).get().join(); $("p").text(aWord); </script> </body> </html>
八、.not()
用來移除指定的元素。
有三種多載方法
.not( Selector selector ) Selector Type: Selector or Element or Array
.not( Function function )
.not( jQuery selection )
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.0.0.js"></script> <meta name="viewport" content="width=device-width"> </head> <body> <ul> <li>list item 0</li> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> </ul> <script> $("li").not(":even").css("background-color", "red"); $("li:even").css("background-color", "yellow"); </script> </body> </html>
九、.slice()
.slice( start [, end ] )
用來指定要保留的範圍(zero-based)。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.0.0.js"></script> <meta name="viewport" content="width=device-width"> </head> <body> <ul> <li>list item 0</li> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> </ul> <ul> <li>list item 0</li> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> </ul> <script> $("ul:eq(0) > li").slice(2).css("background-color", "red"); $("ul:eq(1) > li").slice(2, 4).css("background-color", "yellow"); </script> </body> </html>
例如：
1、.slice( 2 )則表示第0~第1不保留，而第2以後皆保留。
2、.slice( 2 , 4)則表示第2~第3保留，其餘不保留。