How to get an array of highlighted rows in a table using jQuery?

Question

I have a table and when the user clicks on a row it's highlighted yellow. I use a class to set the color using CSS, as in:

.highlight {
    background-color: yellow; 
}

Now, when the user clicks a submit button, I want to get all the highlighted rows, then get a specific column value from that row, and then put them into an array. I'm missing something though as my selector isn't putting any row data in the array.

var arr = $('#tbl tr').filter(":has(.highlight)");

This is what I used in another function to get the value from a single row when the user clicked on it. The code below works, but I need to do this for all the highlighted rows.

$(this).find('#selectedRowItem').text()

I'm using jQuery 1.6.4. by the way.

Also, I was looking into using the data function to cache it as a better alternative, but opted for an array as a easier solution.

Any ideas as to how to do this?

Answer 1

var $highlighted = $('#tbl tr.highlight');