一般元素下的多个指定子元素显示隐藏效果，使用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>
