jquery traverse through row getting span class and title

Question

I have a table each row has an id and several td's containing spans

e.g

<tr id="row"><td><span class="first name">myfirstname<span class="surname">mysurname</span></td><td><span class="street">mystreet</span><span class="town">mytown</span></td>

What I wan't to do is when passed a rowid traverse the row and create a key value array of the span classnames and the span values.

currently I can go find each thing individually which is very cumbersome.

Answer 1

Your markup should be fixed a bit:

<table>
    <tr id="row1">
        <td>
            <span class="first name">myfirstname </span>
            <span class="surname">mysurname</span>
            </td>
                <td>
                    <span class="street">mystreet</span>
                    <span class="town">mytown</span>
        </td>
    </tr>
</table>

You didn't close the <span> and <tr> ​

CODE:

function getSpansData(rowId) {
    var map = {};
    $('#' + rowId + ' span').each(function() {
        map[this.className] = this.innerHTML;
    });

    return map;
}

getSpansData('row1');

Live DEMO

Answer 2

function traverseRow(id) {
    var arr = {};
    $('td span', 'tr#' + id).each(function() {
        arr[this.className] = this.innerHTML;
    });
    return arr;
}

traverseRow('row');

Answer 3

You should send a code sample to have more accurate responses. Try this:

var values = new Object();
$("#row").filter("td span").each(function(){
    values[$(this).attr("class")] = $(this).text();
});
alert(values.surname);

Answer 4

var map = {};
$("#row_id td span").each(function() { 
  map[$(this).attr("class")] = $(this).html(); 
});