jquery使用filter()控制子元素顯示隱藏

更新時(shí)間：2023年08月12日 15:25:30 投稿：yin

一般元素下的多個(gè)指定子元素顯示隱藏效果,使用css中的選擇器:nth-child()、:nth-of-type(),但如果想使用JavaScript動態(tài)控制,就需要用到j(luò)query的filter()方法

css中的子元素選擇器

1、:nth-child() 選擇器

:nth-child(n) 選擇器匹配屬于其父元素下(所有子元素)的第 N 個(gè)子元素，不論元素的類型，n 可以是數(shù)字、關(guān)鍵詞或公式。

2、:nth-of-type(n) 選擇器

:nth-of-type(n) 選擇器匹配屬于父元素的特定類型的第 N 個(gè)子元素的每個(gè)元素，n 可以是數(shù)字、關(guān)鍵詞或公式。

jQuery filter() 方法

filter()方法返回與特定條件匹配的元素。

filter()方法過濾掉所有不符合所選條件的元素，并且將返回那些匹配項(xiàng)。

filter()方法與not()方法相反。

語法：

獲取符合特定條件的元素：

$(selector).filter(criteria)

使用函數(shù)獲取元素：

$(selector).filter(function(index))

使用示例

index值從0 開始。 :lt(index) 選取帶有小于指定 index值的元素。 :gt(index) 選取帶有大于指定index值的元素。

<!DOCTYPE html>
<html>
<title>jQuery filter()遍歷過濾器示例</title>
<head>
<script src="https://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").filter(".demo").css("background",?"red");//返回所有類名為"demo"的p元素
$("p").filter(":even").css("background", "yellow");//返回所有偶數(shù)項(xiàng)的p元素
$("p").filter(":lt(3)").hide();// 實(shí)現(xiàn)小于第4個(gè)的元素隱藏
$("p").show();//恢復(fù)全部顯示
$("p").filter(":gt(2)").hide();// 實(shí)現(xiàn)大于第3個(gè)的元素隱藏
$("p").show();//恢復(fù)全部顯示
$("p").not(".demo").hide(); // not() 返回不匹配的元素
});
</script>
</head>
<body>
<p>這是第一段。</p>
<p class="demo">這是第二段。</p>
<p class="demo">這是第三段。</p>
<p class="demo">這是第四段。</p>
<p>這是最后一段。</p>
</body>
</html>

到此這篇關(guān)于jquery使用filter()控制子元素顯示隱藏的文章就介紹到這了,更多相關(guān)jquery使用filter()控制子元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: