filter和find区别,元素遍历

filter和find区别

find()会在当前指定元素中查找符合条件的子元素,是对它的子集操作,而filter()则是在当前指定的元素集合中查找符合条件的元素,是对自身集合元素进行筛选

HTML代码:

1
2
3
4
5
6
7
8
<div class="benben">
	<p>Hello,World!</p>
	<p>Hello,World Again!</p>
	<p class="test">Test1</p>
</div>
<div class="test">
	<p>Test2</p>
</div>

jQuery代码:

1
2
3
4
5
6
7
8
<script type="text/javascript">
//using find()
var $find=$("div").find(".test");
alert($find.html());//display "Test1"
//using test()
var $filter=$("div").filter(".test");
alert($filter.html());//display "Test2"
</script>

遍历节点

1,.children()获取所有子元素

2,next() 匹配元素后面紧邻的同辈元素

3,prev()匹配元素前面紧邻的同辈元素

4,siblings()取得匹配元素前后所有的同辈元素

请思考这个带有基本的嵌套列表的页面:

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

如果我们从第三个项目开始,则可找到该元素的同胞元素:

$('li.third-item').siblings().css('background-color', 'red');

此处调用的结果是将项目 1、2、4 和 5 的背景设置为红色。 设置为红色背景。由于我们未应用选择器表达式,所有同胞元素很自然地成为了对象的一部分。如果已应用选择器,则只会包含四个列表中的匹配的项目。

原始元素不包含在同胞元素中,当我们打算找到 DOM 树的特定层级上的所有元素时,记住一点很重要。

原文地址:https://www.cnblogs.com/aqbyygyyga/p/3153185.html