jQuery中嵌套的forEach子级循环

Question

<div class="right_channel_bar" id="channel_box" style="margin-left: -12px;">
    <div class="row" id="channel_1">
        <span class="program" data-start-time="00:00" data-end-time="00:30" style="margin-left: 0px">
            <a class="truncate" style="width: 180px; href=" javascript:void(0); "=" ">bing technology network</a></span><span class="program " data-start-time="00:31 " data-end-time="01:00 " style="margin-left: 6px "><a class="truncate " style="width: 174px; href=" javascript:void(0);"="">songs</a>
        </span>
        <span class="program" data-start-time="01:02" data-end-time="02:00" style="margin-left: 12px">
            <a class="truncate" style="width: 348px; href=" javascript:void(0); "=" ">news channel</a></span><span class="program " data-start-time="02:05 " data-end-time="03:00 " style="margin-left: 30px "><a class="truncate " style="width: 330px; href=" javascript:void(0);"="">evenst</a>
        </span>
        <span class="program" data-start-time="03:00" data-end-time="04:00" style="margin-left: 0px">
            <a class="truncate" style="width: 360px; href=" javascript:void(0); "=" ">microsoft technology network</a></span><span class="program " data-start-time="04:00 " data-end-time="04:45 " style="margin-left: 0px "><a class="truncate " style="width: 270px; href=" javascript:void(0);"="">yahoo technology network</a>
        </span>
    </div>
    <div class="row" id="channel_2">
        <span class="program" data-start-time="00:00" data-end-time="00:30" style="margin-left: 0px">
            <a class="truncate" style="width: 180px; href=" javascript:void(0); "=" ">bing technology network</a></span><span class="program " data-start-time="00:31 " data-end-time="01:00 " style="margin-left: 6px "><a class="truncate " style="width: 174px; href=" javascript:void(0);"="">songs</a>
        </span>
        <span class="program" data-start-time="01:02" data-end-time="02:00" style="margin-left: 12px">
            <a class="truncate" style="width: 348px; href=" javascript:void(0); "=" ">news channel</a></span><span class="program " data-start-time="02:05 " data-end-time="03:00 " style="margin-left: 30px "><a class="truncate " style="width: 330px; href=" javascript:void(0);"="">evenst</a>
        </span>
        <span class="program" data-start-time="03:00" data-end-time="04:00" style="margin-left: 0px">
            <a class="truncate" style="width: 360px; href=" javascript:void(0); "=" ">microsoft technology network</a></span><span class="program " data-start-time="04:00 " data-end-time="04:45 " style="margin-left: 0px "><a class="truncate " style="width: 270px; href=" javascript:void(0);"="">yahoo technology network</a>
        </span>
    </div>
</div>

从上面提到的HTML中，我需要获取data-start-time，但我无法获取。请帮助我修复下面的jQuery代码：

$('#channel_box .row').each(function () {
    $(this).children(".program").each(function () {
        console.log($(this).data('start-time') + ' - ' + $(this).data('start-time'))
    });
});

- Dixit puneet

Answer 1

尝试使用以下内容：

console.log($(this).attr('data-start-time') + ' - ' + $(this).attr('data-start-time'))

- Anonymous0day

Answer 2

你的jQuery代码运行良好，问题出在你的标记上。

我认为问题出在这里的未转义引号：

javascript:void(0);"="">b

如果您按照下面所示的格式（以及JSFiddle中）正确地格式化您的HTML，它将正常工作。

<div class="right_channel_bar" id="channel_box" style="margin-left: -12px;">
   <div class="row" id="channel_1">
      <span class="program" data-start-time="00:00" data-end-time="00:30" style="margin-left: 0px"></span>
      <span class="program" data-start-time="00:01" data-end-time="00:30" style="margin-left: 0px"></span>
   </div>
   <div class="row" id="channel_2">
      <span class="program" data-start-time="00:00" data-end-time="00:30" style="margin-left: 0px"></span>
      <span class="program" data-start-time="00:01" data-end-time="00:30" style="margin-left: 0px"></span>
   </div>
</div>

http://jsfiddle.net/vx7vv6tm/1/

另外，您可能希望考虑使用 CSS 类并删除内联样式。

- Darren