卡卡網(wǎng)

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

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

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

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

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

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

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

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

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

Jquery代碼：

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

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

輸出：

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

execcodegetcode

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

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

現(xiàn)在使用jquery .each() 方法，我們?cè)谶@個(gè)JS對(duì)象上創(chuàng)建一個(gè)循環(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);
});

輸出：

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

execcodegetcode

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

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

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

HTML標(biāo)記：

<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());
});

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

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

輸出：

最后，我們能顯示所有Li標(biāo)簽的文本。

execcodegetcode

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

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

Jquery代碼：

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

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

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

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

輸出：

execcodegetcode

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

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

現(xiàn)在使用$.each()方法，我們獲取每個(gè)表行單元格值即是每個(gè)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é)論：在本文中，我們學(xué)習(xí)了如何以多種不同方式使用jquery $.each()方法，我們可以循環(huán)遍歷簡(jiǎn)單數(shù)組，復(fù)雜JSON對(duì)象或HTML標(biāo)記即循環(huán)遍歷表行或li標(biāo)記。

標(biāo)簽: JQuery  each方法