JQuery each() populating li or span

Question

I Cannot seem to get this right. my .each() returns all 5 elements but my timing is off. also can't seem to get syntax right to get each element of .each():

$(data).find("tr td.Chats").filter(':gt(6)').each(function(){
$('#region3').append('<li></li>');          
    $(this).find('td').each(function(k,v){      
        $('#region3 li').append(
        + '<span class="countyHx">' + (this)(1).innerHTML + '</span>'
        + '<span style="width: 20%; background-color: yellow;">' + (this)(1).innerHTML + '</span>'
        + '<span style="width: 20%; background-color: red;">' + (this)(2).innerHTML + '</span>'
        + '<span style="width: 20%; background-color: green;">' + (this)(3).innerHTML + '</span>'
        + '<span style="width: 20%; background-color: orange;">' + (this)(4).innerHTML + '</span>'
        + '<span style="width: 20%; background-color: purple;">' + (this)(5).innerHTML + '</span>');
    }); 
});
$('#region3').listview('refresh');

}, 'html');

Here is my table data in JSFiddle

UPDATE:

I'm almost there, my listview refresh is not refreshing !

$(data).find("tr:has(td.Chats)").each(function () {
                var $li = $('#region3').append('<li></li>');
                var $tds = $(this).find('td');
                $li.append('<span class="countyHx">' + $tds.eq(0).html() + '</span><br>' 
                + '<span style="width: 20%; background-color: yellow;">' 
                + $tds.eq(1).html() + '</span>' 
                + '<span style="width: 20%; background-color: red;">' 
                + $tds.eq(2).html() + '</span>' 
                + '<span style="width: 20%; background-color: green;">' 
                + $tds.eq(3).html() + '</span>' 
                + '<span style="width: 20%; background-color: orange;">' 
                + $tds.eq(4).html() + '</span>' 
                + '<span style="width: 20%; background-color: purple;">' 
                + $tds.eq(5).html() + '</span>');
            });

        $('#region3').listview('refresh');

Answer 1

Are you after something like this:

JSFiddle: http://jsfiddle.net/MvHTR/5/

$('#tblHospitals').find("tr:has(td.Chats)").each(function () {
    var $li = $('#region3').append('<li></li>');
    var $tds = $(this).find('td');
    $li.append('<span class="countyHx">' + $tds.eq(0).html() + '</span>' + '<span style="width: 20%; background-color: yellow;">' + $tds.eq(1).html() + '</span>' + '<span style="width: 20%; background-color: red;">' + $tds.eq(2).html() + '</span>' + '<span style="width: 20%; background-color: green;">' + $tds.eq(3).html() + '</span>' + '<span style="width: 20%; background-color: orange;">' + $tds.eq(4).html() + '</span>' + '<span style="width: 20%; background-color: purple;">' + $tds.eq(4).html() + '</span>');
});

It looks like you want to find all rows that have tds with class=Chats, but then process each row and extract data from each TD manually. You were processing the child TDs instead (which makes it a bit harder than working with each row).

You were also appending the result to every preceding li using the selector $('#region3 li') where you just wanted the specific LI you just added.

I used the JQuery syntax for getting the html, but you can use the raw DOM elements if you prefer.

If not please clarify the question.