如何使用JQuery循环表元素和检索数据元素？

Question

I have an html table that looks like this in a standard HTML 4.01 Transitional page:

<table>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>etc...</th>
    </tr>
  </thead>
  <tbody id="tableBodyID">
    <tr class="rowElement" data-element="some-data-here">
      <td>Some Table Data</td>
      <td>Some More Table data</td>
      <td>etc.</td>
    </tr>
    <tr class="rowElement" data-element="some-data-here">
      <td>Some Table Data</td>
      <td>Some More Table data</td>
      <td>etc.</td>
    </tr>
  </tbody>
</table>

I want to loop through all the rows and get the "data" in the data-element field and place it in a variable using JQuery. I have tried a number of variations of .children(), .data(), and .each() but have not been able to retrieve the "data" elements.

I have tried (inside a $(document).ready() block...):

$('tbody > tr').each(function() {
  alert( $(this).data('element'));  // CORRECTION - this works.
});

$('tbody').children().each(function() {
  alert( $(this).data('element'));  // CORRECTION - this works
});

$('.rowElement').each(function(i, obj) {
  rowValue = $(this);
  alert(rowValue.data('element'));  // CORRECTION - this works
});

Any help is welcome. I am using HTML 4.01, and JQuery 1.7.1. I have been testing in Firefox, but need to support the other standard browser Firefox, Opera, Safari, Chrome, and IE8+.

(Edited for minor syntax changes)

The actual problem was a case issue, please see comment below. Issue RESOLVED.

Answer 1

This works for me:

$('table').find('tbody > tr').each(function() {
  alert( $(this).data('element')); 
});

​

http://jsfiddle.net/LBKvm/

(it may not be the most efficient way however)

Answer 2

Using .map and .get , you can map each tr into the element data attribute, so as to get an array of those values. As for the selector, an ID is the most straight-forward since it points directly to the tbody element, of which you want the tr descendants: http://jsfiddle.net/zeFGW/ .

var elementValues = $("#tableBodyID tr.rowElement").map(function() {
  return $(this).data("element"); // replace each `tr` with its `element` data
}).get(); // turn jQuery object into an array

Answer 3

Your logic/calls work for me, you have a few issues with syntax though, brackets after ('element'); 's should be ('element')); and the selectors need to be quoted also, the tbody ones are missing should be ('tbody') etc.

The jsfiddle . (Note my replacement of alert to console.log calls)

Tested in chrome 17.

Is your code different from what is posted in the question?