Question

我尝试在页面上选择TD所有class of hours标签并读取每个数据属性（月份的简称），然后在当前内容之后添加该值<td>和</td>。与<td>40 Dec </td>一样。

由于我没有获得任何价值，我的剧本出现了问题，但我错过了什么或做错了什么？

我的jQuery：

＆＃13;

$("tbody").find("td").each(function () {
    if ($(this).hasClass("hours")) {
        var d = $(this).data("date");
        $(this).append("<br>" + d);
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody>
  <td data-date="dec" data-activityid="7" data-resourceid="1" data-projectid="2" class="workingHours-ok hours">40</td>
</tbody>

＆＃13;

Answer 1

您无需使用each()。你可以这样做。

$('td.hours').text(function (index, text) {
    return text + ' ' + this.dataset.date;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td data-date="Dec" class="hours">40</td>
        <td data-date="Jan" class="hours">50</td>
    </tr>
    <tr>
        <td data-date="Feb" class="hours">60</td>
        <td data-date="Mar" class="hours">70</td>
    </tr> 
</table>

Answer 2

只需使用 append(function) ，它会迭代元素并附加返回的html代码。因此在辅助函数内部获取数据属性值并返回它。

$('td.hours').append(function() {
  return '<br>' + $(this).data('date');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td data-date="Dec" class="hours">40</td>
    <td data-date="Jan" class="hours">50</td>
  </tr>
  <tr>
    <td data-date="Feb" class="hours">60</td>
    <td data-date="Mar" class="hours">70</td>
  </tr>
  <tr>
    <td data-date="Jan" class="hours">60</td>
    <td data-date="Mar" class="hours">70</td>
  </tr>
</table>

Answer 3

由于您的 $（此）.data（“日期”）。这不起作用。您应该使用 $（this）.data（'date'） 当然你的选择器应该像

 $("#yourtableid > tbody td.hours").each(function(){
var d= $(this).data('date');//and so on//})

Answer 4

假设您的标记中有tbody，请尝试使用

$("tbody td.hours").each(function () {
     $(this).append("<br>" + $(this).data("date") );
});

或只是

$("td.hours").each(function () {
     $(this).append("<br>" + $(this).data("date") );
});

如果数据日期动态设置

，则

或仅使用attr

$("td.hours").each(function () {
     $(this).append("<br>" + $(this).attr("data-date") );
});

Answer 5

这是您的代码，因为它只是在<table>之前添加<tbody>，因为在您的代码中，<tobody>不是<td>的父代，除非是小孩<table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<table><tbody>
  <td data-date="dec" data-activityid="7" data-resourceid="1" data-projectid="2" class="workingHours-ok hours">40</td>
</tbody></table>


<script>
$("tbody").find("td").each(function () {
     if ($(this).hasClass("hours")) {
        var d = $(this).data("date");
        $(this).append("<br>" + d);
    }
});</script>

查找所有道带标记并阅读其数据属性

5 个答案: