如何使用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()