卡卡網(wǎng)

我想大家都知道使用循環(huán)，它提供了一種快速簡便的方法來重復做一些事情。 當寫代碼時，很多時候我們需要用到循環(huán)，所有語言都提供循環(huán)，例如 For 循環(huán)，Do While 循環(huán)，等等。

本文我們學習怎樣使用jQuery $.each() 方法，換句話說即是我們使用jQuery $.each() ，相當于Jquery的foreach，如何去循環(huán)HTML元素、數(shù)組、對象或者JSON數(shù)據(jù)。

jQuery $.each() 方法的5種使用方式

1. $.each() 方法循環(huán)一個數(shù)組(foreach循環(huán))
2. $.each() 方法循環(huán)一個對象數(shù)組
3. $.each() 方法循環(huán)JSON數(shù)據(jù)
4. $.each() 方法循環(huán)html元素
5. $.each() 方法表格行(tr)和獲得TD值

jQuery $.each()循環(huán)

我們下面開始一個一個地理解和使用jQuery $.each()方法吧，請記住在使用 $.each()方法前要先引用jquery庫文件。

使用jQuery $.each()循環(huán)數(shù)組

一個含有一些數(shù)值的數(shù)組對象，如下所示，myArray是我的數(shù)組變量，它將值保存為一些水果。

現(xiàn)在我們想顯示每一種水果名，即是，使用 jquery .each() 方法循環(huán)這個數(shù)組變量和顯示每一個項目值。

Jquery代碼：

var myArray = ["apple", "mango", "orange", "grapes", "banana"];

$.each(myArray, function (index, value) {
  console.log(index+' : '+value);
});

輸出：

所以這里輸出顯示索引和值。

execcodegetcode

使用jQuery $.each()循環(huán)對象數(shù)組

讓我們采用另一個變量，即一個對象數(shù)組，該數(shù)組含有一些數(shù)據(jù)。

現(xiàn)在使用jquery .each() 方法，我們在這個JS對象上創(chuàng)建一個循環(huán)并顯示它的記錄。

Jquery代碼：

var obj= [
  { FirstName: "Andrea" , LastName:"Ely", Gender:"F"},
  { FirstName: "John" , LastName:"Shaw", Gender:"M"},
  { FirstName: "Leslie" , LastName:"Mac", Gender:"F"},
  { FirstName: "David" , LastName:"Millr", Gender:"M"},
  { FirstName: "Rehana" , LastName:"Rewa", Gender:"F"}
]

$.each(obj, function (index, value) {
  var first_name=value.FirstName;
  var last_name=value.LastName;
  console.log(first_name+" "+last_name);
});

輸出：

這個輸出顯示了對象數(shù)組里的FirstName和LastName。

execcodegetcode

使用jQuery $.each()循環(huán)遍歷一個列舉元素

這個例子中將循環(huán)遍歷HTML元素即是li標簽并顯示li標簽的文本。 我們的HTML標記ul，li標簽如下。

現(xiàn)在通過使用jquery .each() 將遍歷Li標簽并獲取和顯示每個Li標簽的文本。

HTML標記：

<ul id="ul_Items">
  <li class='fruits' >Apple</li>
  <li class='fruits' >Mango</li>
  <li class='automobile' >Honda Accord</li>
  <li class='automobile' >Harley Davidson</li>
  <li class='fruits' >Oranges</li>
  <li class='fruits' >Grapes</li>
  <li class='automobile' >Royal Enfield</li>
</ul>

Jquery代碼：

$("#ul_Items li").each(function(){
  var self=$(this);
  console.log(self.text());
});

另一種寫法我們也能達到同樣的結(jié)果，代碼如下：

$.each($("#ul_Items li"),function(){
  var self=$(this);
  console.log(self.text());
});

輸出：

最后，我們能顯示所有Li標簽的文本。

execcodegetcode

我們讓它變得更加實用真實的編程場景，現(xiàn)在如果用戶想要只展示水果會怎樣。 即，僅顯示其文本為水果的特定Li文本。

如果你注意到我們的HTML標記，我們已經(jīng)為每個li標簽添加了一個類即是fruits和automobile。 現(xiàn)在使用這個類，我們可以過濾我們的Li標簽。 現(xiàn)在讓我們看看我們要顯示的內(nèi)容。

Jquery代碼：

$("#ul_Items li").each(function(){
  var self=$(this);
  //這將檢查li是否有類fruits然后才會顯示
  if(self.hasClass("fruits"))
  {
    console.log(self.text());
  }else
  {
    // other code logic
  }
});

另一種方法是，如果你確定只顯示帶有文本作為水果的Li標簽。 那么最好的方法是只選擇那些Li標簽并在其上循環(huán)，而不是遍歷上面示例中顯示的所有Li標簽。

所以現(xiàn)在jquery代碼循環(huán)遍歷li標簽，其中class為fruits，如下所示。

$("#ul_Items li.fruits").each(function(){
  var self=$(this);
  console.log(self.text());
});

輸出：

execcodegetcode

使用jQuery $.each()循環(huán)遍歷一個表格行(tr)

這里我們有一個HTML表并添加了一些虛擬行。 現(xiàn)在我們想要使用jquery讀取這些表格單元格值。

現(xiàn)在使用$.each()方法，我們獲取每個表行單元格值即是每個td值。

<table id="myTable" style="margin-left:50px;">
  <tr><th>Sr no</th><th>Name</th><th>Gender</th><th>Location</th></tr>
  <tr><td> 1</td><td>Satinder Singh</td><td> M </td><td> India </td></tr>
  <tr><td> 2 </td><td>Amit Sarna</td><td> M </td><td> France </td></tr>
  <tr><td> 3 </td><td>Andrea Ely</td><td> F </td><td> Brazil </td></tr>
  <tr><td> 4 </td><td>Leslie Mac </td><td> F </td><td> Australia </td></tr>
  <tr><td> 5 </td><td>Sonya David </td><td> F </td><td>America</td></tr>
</table>

Jquery代碼：

$(".button").on('click', function () {
  $("#myTable tr").each(function () {
    var self = $(this);
    var col_1_value = self.find("td:eq(0)").text().trim();
    var col_2_value = self.find("td:eq(1)").text().trim();
    var col_3_value = self.find("td:eq(2)").text().trim();
    var col_4_value = self.find("td:eq(3)").text().trim();
    var result = col_1_value + " - " + col_2_value + " - " + col_3_value + " - " + col_4_value;
    console.log(result);
  });
});

execcodegetcode

結(jié)論：在本文中，我們學習了如何以多種不同方式使用jquery $.each()方法，我們可以循環(huán)遍歷簡單數(shù)組，復雜JSON對象或HTML標記即循環(huán)遍歷表行或li標記。

標簽: JQuery  each方法