通过父母的jQuery选择器？

Question

I have this simple table ( nested )

 <table border="1px">
            <tr>
                <th>kkkk</th>
                <th>mmmm</th>
            </tr>
            <tr>
                <td>a</td>
                <td>a</td>
            </tr>
            <tr>
                <td>a</td>
                <td>a</td>
            </tr>
            <tr>
                <td>a</td>
                <td>
                  <table border="1px" style="margin:10px">
                        <tr>
                            <th>xxxx</th>
                          <th style="background-color:yellow">yyyy</th>
                        </tr>
                        <tr>
                            <td>a</td>
                            <td>a</td>
                        </tr>
                        <tr>
                            <td>a</td>
                            <td>a</td>
                        </tr>
                        <tr>
                          <td >a</td>
                            <td  style="background-color:red;" class="theTd">a</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>

(there aren't any table Id's here)

I want by clicking on the red area , to find the row which the yellow value in.

I dont have a problem of getting the index of the TH .

the problem is that I want to do it by Parents() method only - and the red box sees 2 parents TR's which have TH .... The xxx,yyy row and the kkk,mmm row...

Something like :

  alert( $(".theTd").parents("first tr  parent which contains th's").....);

What is the correct Selector syntax ?

http://jsbin.com/udohum/1/edit

edit

I don't want the ordinary parent().parent().... cause a .theTd can contain a wrapper Div's inside it etc... - so the parent here will be DIV. ( which hurts the logic....)

Answer 1

What about something like this?

$('.theTd').click(function(){
    alert($(this).parent().parent().find('tr > th:nth-child(2)').html());
});

(See it working here: http://jsfiddle.net/Te3QB/1/ )

UPDATE: Using the .closest() selector might even be better:

$('.theTd').click(function(){
    alert($(this).closest('table').find('tr > th:nth-child(2)').html());
});

.closest() gets the first element that matches the selector, beginning at the current element and progressing up through the DOM tree.

Answer 2

parents() selects all the parents of the selected element, you can use parentsUntil instead:

$(".theTd").parentsUntil('table').find('th[style^=background]')

jsBin

Or closest() method:

$(".theTd").closest('table').find('tr:has("th")').foo()

Answer 3

To get the tr, try this:

$(".theTd").closest("table").find("tr");

The th is a bit more messy. We will need the nth-child, and for that we need the index:

$(this).closest('table').find('tr th:nth-child('+ ($(this).index()+1) +')');