jQuery filter（）與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>