Jquery filter() Vs Jquery

Question

jQuery filter()和each()方法有什么不同？

因为两者都用于在集合上应用循环。

我听说过可以按集合类型过滤的filter()方法。

Answer 1

.each() =>它将简单地循环遍历所有的记录

例如。

 <ul>
     <li>list item 1</li>
     <li>list item 2</li>
     <li>list item 3</li>
     <li>list item 4</li>
     <li>list item 5</li>
     <li>list item 6</li>
  </ul>

  $(li).each(function() { // it will return all li and set its css
      $(this).css( "background-color", "red" );
  });

filter() =>它将只返回满足某些条件的记录

例如。

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

$( "li" ).filter( ":even" ).css( "background-color", "red" ); // it will only set css to even li

Answer 2

$.filter返回满足给定条件的项的集合，而$.each迭代项的集合。

Answer 3

我倾向于将.each()看作是终止for循环的一种简明的jQuery方式。

例如：

​

var i = 0;
$("#list1 li").each(function() {
  console.log("Looped through list item number: " + i++);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul id="list1">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

​

在Vanilla JS中也可以这样写：

​

var list = document.getElementById("list2");
var items = list.getElementsByTagName("li");
for(var i = 0; i < items.length; i++) {
  console.log("Looped through item number: " + i);
}

<ul id="list2">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

​

顾名思义，使用filter()可以过滤出一组匹配的对象，如下所示：

​

$("li").filter(":first-child").addClass("test");

.test {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
  <li>Number 1</li>
  <li>Number 1</li>
  <li>Number 1</li>
  <li>Number 1</li>
</ul>

​