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 树的特定层级上的所有元素时，记住一点很重要。