遍歷過濾器 (jQuery 9)

官網連結
目前有以下9種：

以下4個我試的結果和基本過濾器 (jQuery 6)一樣，只是寫在括號後面而已
.eq()：等於
.first()：取第一筆
.last()：取最後一筆
.not()：取反

這篇寫以下五個範例：
.filter()：選擇器選到了之後，又再過濾
.has()：選擇器以下有什麼元素，選中的會包括選擇器
.is()：判斷是不是選擇器、DOM元素、jQuery物件
.map()：取得一個集合中的全部元素
.slice()：取得集合裡的一部分

※HTML

※A 

都是div

<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>

※B

A裡面再放span

<div class="a">
    A
    <span>aa</span>
</div>
    
<div class="b">
    B
    <span>bb</span>
</div>
    
<div class="c">
    C
    <span>cc</span>
</div>
    
<div class="d">
    D
    <span>dd</span>
</div>
    
<div class="e">
    E
    <span>ee</span>
</div>

※C

A裡面再放div

<div class="a">
    A
    <div>aa</div>
</div>
    
<div class="b">
    B
    <div>bb</div>
</div>
    
<div class="c">
    C
    <div>cc</div>
</div>
    
<div class="d">
    D
    <div>dd</div>
</div>
    
<div class="e">
    E
    <div>ee</div>
</div>

※D

<div class="a">
    A
    <span class="b">B</span>
</div>
<div class="c">C</div>
<div class="d">
    D
    <p class="e">
        E
        <span class="f">F</span>
    </p>
</div>
<div class="g">G</div>
<div class="h">H</div>

※.filter()

裡面可以放四種：
1.放選擇器裡的字串
2.放選擇器：這個我無法了解，下面會說
3.放元素：這個官網和網路上沒找到相關的範例，這個我也無法了解，我試過HTML元素和DOM了，知道的分享一下吧！
4.放函數

我只會第一種和第四種，其他兩種我無法理解

※放選擇器裡的字串、放選擇器、元素

※結果：
A
$('div').filter('.d')、$('div').filter($('.d'))：都選到D
$('div').filter(':even')：ACE
$('div').filter($(':even'))：BD，完全無法了解
$('div').filter($('div'))：全部


B：要注要filter裡面要針對div去設定，假設下面的span有id，設id是沒有作用的
$('div').filter('.d')、$('div').filter($('.d'))：都選到D dd
$('div').filter(':even')：A aa C cc E ee
$('div').filter($(':even'))：無，完全無法了解
$('div').filter($('div'))：全部
$('div').filter($('span'))：無


C
$('div').filter('.d')、$('div').filter($('.d'))：都選到D dd
$('div').filter(':even')：全部
$('div').filter($(':even'))：aa bb cc dd ee，完全無法了解
$('div').filter($('div'))：全部


D
$('div').filter('.d')、$('div').filter($('.d'))：DEF
$('div').filter(':even')：AB DEF H，而:odd就是CG了
$('div').filter($(':even'))：結果是DEF H，而:odd是ABC G，完全無法了解
$('div').filter($('div'))：全部
$('div').filter($('span'))：無
$('div').filter($('p'))：無

※函數

$(function() {
    $('div').filter(function(i) {
        console.log('text=' + $(this).text());
        return $('p', $(this)).length == 1;
        // return i % 2 == 0;
    }).css('color', 'red');
});
----------
<div class="a">
    A
    <span>aa</span>
</div>
    
<div class="b">
    B
    <p>
        p1
        <span>b1</span>
        <span>b2</span>
    </p>
</div>
    
<div class="c">
    C
    <p>
        p2
        <span>cc</span>
    </p>
</div>

※判斷div下面有1個p元素的，所以B p1 b1 b2 C p2 cc會選中

※註解那行是偶數會選中

※.has()

可以放選擇器裡的字串和DOM元素，官方只寫字串，我也還不知道相關的做法，等知道了再補
以D為例：
$('div').has('p')：DEF
$('div').has('span')：ABDEF

以下的兩個不會包括選擇器本身，以這個範例就是div
$('div p')：EF
$('div span')：BF

※.is()

和.filter()一樣可以放4種
※以.filter()的函數範例為例

$(function($) {
    $('div').filter(function(i) {
        console.log('text=' + $(this).text());
        if($(this).is(':last-child')){
            return true;
        }
    }).css('color', 'red');
});

※結果是C p2 cc

※.map()

可以放兩個參數，index和dom 集合

$(function($) {
    var xxx = $(':checkbox').map(function() {
        return this.value;
    }).get();
    alert(xxx);
});
----------
<label for="aaa">A</label>
<input type="checkbox" value="a" id="aaa" name="ya">
    
<label for="bbb">B</label>
<input type="checkbox" value="b" id="bbb" name="ya">
    
<label for="ccc">C</label>
<input type="checkbox" value="c" id="ccc" name="ya">
    
<label for="ddd">D</label>
<input type="checkbox" value="d" id="ddd" name="ya">

※結果是a,b,c,d

※當然也可以用jQuery的寫法，return $(this).val();

※.slice()

以D為例：

$('div').slice()：等同$('div').slice(0)，取全部
$('div').slice(2)：第2個到最後，D是第2個，所以是D~H
$('div').slice(1, 3)：注意最後一個不會取，所以是CDEF
$('div').slice(-3, -1)：要注意不是(-1,-3)，-3一樣不會取，所以是DEFG
$('div').slice(-3)：和正數不一樣，是取到-3(含)的意思，所以是DEFGH