Question

我有一个简单的示例表，其中包含每个表行的数据属性。

<table id="example">
  <tr data-sample="1">
    <th>Fox</th>
    <th>Sam</th>
    <th>Ted</th>
  </tr>
  <tr data-sample="2">
    <td>Bill</td>
    <td>Nick</td>
    <td>Pal</td>
  </tr>
  <tr data-sample="3">
    <td>El</td>
    <td>Pal</td>
    <td>Tea</td>
  </tr>
</table>

我正在尝试使用以下代码获取所有data-sample属性：

('#example tr').each(function () {
    console.log(this.data('sample'));
});

JSfiddle

我得到一个“this.data不是函数”错误。这让我明白了.each jquery循环this返回一个DOM元素，而不是一个函数或者我可以使用一个选择器的任何东西（如果我只打印出this，我得到一个表的列表行和他们的孩子）。有没有办法让this成为选择器？ ('#example').children('tr')和('#example').find('tr')会得到相同的结果。

Answer 1

Jquery语法错误

this不是jquery对象。使用$(this).data('sample')

$('#example tr').each(function () {
    console.log($(this).data('sample'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have a simple example table that has data-attributes for every table row.

<table id="example">
  <tr data-sample="1">
    <th>Fox</th>
    <th>Sam</th>
    <th>Ted</th>
  </tr>
  <tr data-sample="2">
    <td>Bill</td>
    <td>Nick</td>
    <td>Pal</td>
  </tr>
  <tr data-sample="3">
    <td>El</td>
    <td>Pal</td>
    <td>Tea</td>
  </tr>
</table>

或使用attr()

  $('#example tr').each(function () {
        console.log($(this).attr('data-sample'));
    });

Answer 2

您的代码中有两个问题：

1）您需要将DOM对象转换为jquery对象以便与.data()

一起使用

2）你在.data()传递了错误的属性参数。它应该是sample：

$('#example tr').each(function () {
  console.log($(this).data('sample'));
});

Answer 3

有两种方法可以做到这一点 -

<强> ＃1

$('#example tr').each(function () {
  console.log($(this).data('sample'));
});

<强> ＃2

$('#example tr').each(function () {
  console.log($(this).attr('data-sample'));
});

Answer 4

检查

$(document).ready(function(){
            $('#example tr').each(function () {             
                console.log($(this).attr("data-sample"));                   
            });
        });

如果您想获取行内容，请使用此

$('#example tr').each(function (i) { 
   alert($('#example tr[data-sample]')[i].innerText.split("\t"));
});

使用.each循环获取元素属性

4 个答案: