jQuery selector problem

Question

Hello all

I am stuck in a selector problem in JQuery. I have the following html structure ....

<table>
 <tr>
   <td rowspan="3"></td>
   <td></td>
   <td></td>
   <td rowspan="3"></td>
 </tr>
 <tr>
   <td></td>
   <td></td>
 </tr>
 <tr>
   <td rowspan="4"></td>
   <td></td>
   <td></td>
   <td rowspan="4"></td>
 </tr>
 <tr>
   <td></td>
   <td></td>
 </tr>
 ....
</table>

I want to select the first td in a tr having the property rowspan. How can I select this using JQuery selectors.

something like $("table > tr > td[rowspan]") selects all the td's having the rowspan property.

Regards

Answer 1

<table>s have implicit <tbody>, that is why your selector isn't working. Try:

$("table td[rowspan]")

Now, the first <td> in each <tr> would be:

$("table tr").find("td[rowspan]:first")

Working example (quite messy, but that's your table): http://jsbin.com/aqere/2

Answer 2

See first-child

$("table td[rowspan]:first-child")

As @kobi said, there is an implicit tbody element that browsers inject. To be very specific, use:

$("table > tbody > tr > td[rowspan]:first-child")