Why does this give the first id on each iterations? Or better, how do I get every id's?

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

This print "17" two times, when selecting 2 rows. And I can see the second line is "18" so something is wrong.

Why does this give the first id on each iterations? Or better, how do I get every id's?

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

This print "17" two times, when selecting 2 rows. And I can see the second line is "18" so something is wrong.

• javascript
• jquery

• 1 Because you're not telling it which one you want: console.log('rows.attr("id")' + rows.eq(i).attr('id')); – Jonas Grumann Commented Mar 3, 2015 at 10:52
• and the for loop is wrong: for (var i = 0; i < rows.length; i++) { as Satpal stated – Jonas Grumann Commented Mar 3, 2015 at 10:54
• for cycle is incorrect. It should be something like: for (var i = 0; i < rows.length; i++) { console.log('row ID: ' + rows[i].id); } – Regent Commented Mar 3, 2015 at 10:54

4 Answers 4

I would remend you to use .each()

the callback is fired in the context of the current DOM element, so the keyword this refers to the element.

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
}

You can use jquery map and get the values in array:

$('#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./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" />

References:

.map()

.get()

A jQuery instance for a given selector (here, #mytable tbody tr.selected) can be referred to immediately as you are doing. This, however, has the interesting effect of referring back to the element in the collection that the internal pointer currently refers to (for most cases, this is considered the first element. Reference here.).

In order to avoid this, consider modifying your code as follows:

• use the jQuery object as an array:

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

• use jQuery.forEach to iterate:

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

Hope this work!

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