脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery使用filter()控制子元素

jquery使用filter()控制子元素显示隐藏

 更新时间：2023年08月12日 15:25:30   投稿：yin  
一般元素下的多个指定子元素显示隐藏效果,使用css中的选择器:nth-child()、:nth-of-type(),但如果想使用JavaScript动态控制,就需要用到jquery的filter()方法

一般元素下的多个指定子元素显示隐藏效果，使用css中的选择器:nth-child()、:nth-of-type()，但如果想使用JavaScript动态控制，就需要用到jquery的filter()方法。

css中的子元素选择器

1、:nth-child() 选择器

:nth-child(n) 选择器匹配属于其父元素下(所有子元素)的第 N 个子元素，不论元素的类型，n 可以是数字、关键词或公式。

2、:nth-of-type(n) 选择器

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，n 可以是数字、关键词或公式。

jQuery filter() 方法

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

filter()方法过滤掉所有不符合所选条件的元素，并且将返回那些匹配项。

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

语法：

获取符合特定条件的元素：

$(selector).filter(criteria)

使用函数获取元素：

$(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");//返回所有偶数项的p元素
$("p").filter(":lt(3)").hide();// 实现小于第4个的元素隐藏
$("p").show();//恢复全部显示
$("p").filter(":gt(2)").hide();// 实现大于第3个的元素隐藏
$("p").show();//恢复全部显示
$("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>

到此这篇关于jquery使用filter()控制子元素显示隐藏的文章就介绍到这了,更多相关jquery使用filter()控制子元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论