Nested foreach jquery children

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>

From the above mentioned HTML, i need to get data-start-time but i am unable to fetch. Kindly help me fix the jquery code below:

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

Answer 1

try with that :

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