Find cells that are not in the header and are only in the first column of a table using JQuery

I used to have something like,

$(elem).parents('li').find(...)

Where elem was an item in a list, so it was easy to get a reference to all of the items in the list. Now however I have added more information and decided to use a table, where the list fits into the table as follows.

[header][header][header]

[list 1][ cell ][ cell ]

[list 2][ cell ][ cell ]

[list 3][ cell ][ cell ]

I'm a little stuck creating the equivalent JQuery do a .find() on just the cells that have the list items in it. The list items are always in the l开发者_StackOverflow中文版eft-most table cells excluding the header.

Here is what the table looks like in html.

<table id="my-table">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
<tr>
<td>list item 1</td>
<td>junk</td>
<td>junk</td>
<td>junk</td>
</tr>
<tr>
<td>list item 2</td>
<td>junk</td>
<td>junk</td>
<td>junk</td>
</tr>
</table>

Use:

$(elem).closest('tr').find(...)

If the li's are always in the first cell of each row then this should work:

$('td:first-child>li')

If you make use of thead and tbody you can find rows only in the body much easier.

Change your markup to something like this:

<table>
    <thead>
       ... header rows ...
    </thead>
    <tbody>
       ... body rows ...
    </tbody>
</table>

Then you can simply include tbody in your jquery selector to find just rows which are body rows.

Something like #my-table tbody td:first-child. Where first-child will get you the first column.

This will give you only the first column in each row.

var rows = $('tr :nth-child(1)', '#my-table').not('th');

If you want to loop through and do something to each of these now, just use:

rows.each(function()
{
   //Do something with the columnn
});

The solution below will output the matching elements, first <td> in each row, to <div id="#results"

Working example at: http://jsfiddle.net/6faUf/

HTML:

<table border="5">
    <thead>
        <tr><th>1</th><th>2</th><th>3</th></tr>
    </thead>
    <tbody>
        <tr><td><ul><li>List1</li></ul></td><td>2</td><td>3</td></tr>
        <tr><td><ul><li>List2</li></ul></td><td>2</td><td>3</td></tr>
    </tbody>
</table>
<div id="results">The list values are: </div>

JavaScript (jQuery):

$('td:first-child').each(function(){
    var value = $(this).text();
    $("#results").append(value);
});

If you need the cells that have the list items in them, you'd need the :has() selector, so there'd be something like that:

• $(elem).closest('table').find('td:has(li) ...') — if you need all the li in the table
• or $(elem).closest('tr').find('td:has(li) ...') — if you need all the li in the raw