如何使用jQuery獲取表中每行的每個id？

Question

爲什麼這會在每次迭代時給出第一個ID？或者更好的是，我如何獲得每個ID？

$('#foo').on('click', function() { 
    var rows = $('#mytable tbody tr.selected'); 
    for (var i = 0; rows[i]; i++) { 
     console.log('rows.attr("id")' + rows.attr('id')); 
    } 
}); 

當選擇2行時，此打印「17」兩次。我可以看到第二行是「18」，所以有些事情是錯的。

Answer 1

我會建議你使用.each()

回調在目前的DOM元素的情況下解僱，所以關鍵字this指元素。

var rows = $('#mytable tbody tr.selected'); 
rows.each(function(){ 
    console.log(this.id); //Here this refers current row 
}) 

OR

var rows = $('#mytable tbody tr.selected'); 
//Here you need to add break condition 
for (var i = 0; i < rows.length; i++) { 
    console.log('rows.attr("id")' + rows[i].id); //access row using index 
} 

Answer 2

希望這項工作！

$('#foo').on('click', function() { 
    var rows = $('#mytable tbody tr.selected'); 
    for (var i = 0; rows.length; i++) { 
     console.log('rows.attr("id")' + rows[i].id); 
    } 
}); 

Answer 3

一個jQuery的情況下，對指定選擇（這裏，#mytable tbody tr.selected）可以被稱爲立即爲你正在做的。然而，這具有引用內部指針當前所引用的集合中的元素的有趣效果（對於大多數情況，這被認爲是第一個元素，Reference here。）。

爲了避免這種情況，考慮修改您的代碼如下所示：

• 使用jQuery對象作爲數組：

  $('#foo').on('click', function() { 
      var rows = $('#mytable tbody tr.selected'); 
      for (var i = 0; i<rows.length; i++) { 
      console.log('rows.attr("id")' + rows[i].attr('id')); 
      } 
  }); 
  

• 使用jQuery.forEach迭代：

  $('#foo').on('click', function() { 
       var rows = $('#mytable tbody tr.selected'); 
       rows.forEach(function() { 
       console.log($(this).attr("id")); 
       }); 
      }); 
  

Answer 4

您可以在陣列使用jquery的地圖，並獲取值：

$('#foo').on('click', function() { 
 
    var rows = $('#mytable tbody tr.selected'); 
 

 
    var ids = rows.map(function() { 
 
    return this.id; 
 
    }).get(); 
 

 
    console.log(ids);//outputs ['row1', 'row2', 'row3'] 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="mytable"> 
 
    <tr id="row1" class="selected"> 
 
    <td></td> 
 
    </tr> 
 
    <tr id="row2" class="selected"> 
 
    <td></td> 
 
    </tr> 
 
    <tr id="row3" class="selected"> 
 
    <td></td> 
 
    </tr> 
 
</table> 
 

 
<input type="button" id="foo" value="Get all row id" />

參考文獻：

.map()

.get()