如何使用JQuery循環表元素和檢索數據元素？

Question

我有一個在標准HTML 4.01 Transitional頁面中看起來像這樣的html表：

<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>

我想循環遍歷所有行並獲取data-element字段中的“data”，並使用JQuery將其放入變量中。 我嘗試過.children（）,. data（）和.each（）的多種變體，但是無法檢索“data”元素。

我試過（在$（document）.ready（）塊中...）：

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

歡迎任何幫助。 我使用的是HTML 4.01和JQuery 1.7.1。 我一直在Firefox中測試，但需要支持其他標准瀏覽器Firefox，Opera，Safari，Chrome和IE8 +。

（針對較小的語法更改進行了編輯）

實際問題是一個案例問題，請參閱下面的評論。 問題解決了。

Answer 1

這對我有用：

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

http://jsfiddle.net/LBKvm/

（但它可能不是最有效的方式）

Answer 2

使用.map和.get ，可以將每個tr映射到element數據屬性，以獲取這些值的數組。 至於選擇器，ID是最直接的，因為它直接指向tbody元素，你想要tr后代： 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

你的邏輯/調用對我有用，但你有一些語法問題，括號后面('element'); 應該是('element')); 並且選擇器也需要引用，缺少的那些應該是('tbody')等。

jsfiddle 。 （注意我將alert更換為console.log調用）

測試鉻17。

您的代碼與問題中發布的代碼有何不同？