2014年9月23日 星期二

[JQuery] jQuery篩選器 parent , closest , parents , parentsUntil

這些篩選器都是找父親的，但具體用法不同。

.parent(expr) - 查找父親，只查一級，正宗的父親，表達是應該很少用。

.parents(expr) - 加了複數，就變成找多個父親了，從父親開始找，一直往上查，查到根元素，然後透過expr表達式過濾。


.closest(expr) - 這個跟parents類似，但是這個是從當前元素開始查起，並且查到符合表達式就會停止。

.parentsUntil(expr) - 跟parents類似，區別是不會查到根元素，遇到符合expr就會停止了，同時不包括符合expr的那個元素。

測試範例： 
<body>
<div id="main">
    <div id="hot" class="rightbar">
        <h2>熱門推薦</h2>
        <ul>
            <li>
                <ul>
                    <li class="p">融氏橄欖油</li>
                    <li>幫寶适紙尿褲</li>
                    <li id="h">有機大米</li>
                    <li>妙潔垃圾袋</li>
                    <li>優樂美奶茶</li>
                    <li>親親果凍</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>海飛絲洗頭膏</li>
                    <li>六神花露水</li>
                    <li>舒膚佳香皂</li>
                    <li>心相印紙巾</li>
                    <li>哇哈哈礦泉水</li>
                    <li>王老吉</li>
                </ul>
            </li>
        </ul>
    </div>
</div>
</body>

<script language="javascript" type="text/javascript">
//此處为jQuery代碼
</script>
測試１：找到id = "h"元素的父元素並設置背景色為灰。 
$("#h").parent().css("background-color","#ccc");
效果：

上面的代碼等價於： 
$("#h").parent("ul").css("background-color","#ccc");
如果要找爺爺輩的： 
$("#h").parent("li").css("background-color","#ccc");
則會失敗。

測試２：找到id = "h"的祖輩元素中符合是ul標籤的元素，設置背景色為灰。 
$("#h").parents("ul").css("background-color","#ccc");
效果：
parents不但找到了父親，還找到了曾祖父，但是closest就不會，因為closest找到了父親就會停止找了。

測試３：用closest找到id = "h"的祖輩元素中符合是ul的標籤元素，設置背景色為灰。 
$("#h").parents("li").css("background-color","#ccc");
效果： 
$("#h").closest("li").css("background-color","#ccc");
效果：

測試５：找到id = "h"的父元素中是ul標籤的元素，並設置背景色為灰，目的是測試parentsUntil查找到的expr就停止了，但不包含符合expr的那個元素，比對測試１。 
$("#h").parentsUntil("ul").css("background-color","#ccc");
效果：
沒出來，其實已經找到了，只不過把找到的ul給排除了，不信找找爺爺輩的li試試。 
$("#h").parentsUntil("li").css("background-color","#ccc");
效果：
出來了吧，其實這次變灰的是ul，因為把li排除了。

測試６：測試parents和parentsUntil的區別，parentsUntil找到就停止了，parents會一直往上找，找到id = "h"的父輩元素中是li標籤的元素，並設置背景色為灰。
這個看測試２和測試５的第一個就能看出來。
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)