Question

var data = "<div><table width='100%'><tr><td align='right' ><div class='close16'/></td></tr></table><div><table><tr><td rowspan='4' width='50px;'><img src='" + staffItem.Photo + "' Width='48' Height='48'  /></td><td>" + staffItem.Name + " ( " + staffItem.StaffId + " )</td></tr><tr><td><table cellpadding='0' cellspacing='0'><tr><td>" + staffItem.Email + "</td><td>&nbsp;|&nbsp;</td><td>" + staffItem.Mobile + "</td></tr></table></td></tr></table></td></tr></table></div></div> ";
$('#staffInCharge').append(data);

I’ve collected staff details like this, from the autocomplete textbox, and am storing these into a div…..how can I collect the “staffId” alone(even if I have 5 or 10 records within the div)…..I think I can get it by using .each method, I donno how to proceed, can anyone help me here

Answer 1

The easiest solution would be to wrap the id in a span, or something where you could easily target it with jQuery.

For brevity, I just pulled the column with the id:

... "<td>" + staffItem.Name + " ( <span class='id'>" + staffItem.StaffId + "</span> )</td> "...

And then get them with jQuery:

function getIds() {
    var ids = [];
    $(".id").each(function() {
      ids.push($(this).text());
    });
    return ids;
}

Now anywhere, you can use getIds() to get the list of ids.

var myListOfIds = getIds(); // returns [50, 51, ...]