如何获得与选择器匹配的最接近的父OR兄弟？

Question

给定一个表：

<table border>
    <tr>
        <th rowspan=3>H1</th>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
    <tr>
        <th rowspan=3>H2</th>
        <td>21</td>
    </tr>
    <tr>
        <td>22</td>
    </tr>
    <tr>
        <td>23</td>
    </tr>
</table>

假设我们在'td'上有一个事件，该事件应搜索最接近的'th'（向上遍历DOM）。 例如，单击1、2或3时，它应返回H1。 单击21、22、23时，它应返回H2。

有任何想法吗？

Answer 1

您正在检查可以覆盖不同分支的HTML结构，所以你需要编写一个递归函数来检查同级th元素，如果没有，最近的孩子tr元素的兄弟姐妹。 尝试这个：

$('td').click(function() {
    alert(findTh($(this).closest('tr')));
});

function findTh($row) {
    var $th = $('th', $row), 
        $prevRow = $row.prev('tr');

    if ($th.length) {
        return $th.text();
    }
    else if ($prevRow.length) {
        return findTh($prevRow);
    }
    else {
        return '';
    }
}

小提琴的例子

Answer 2

选择同级和原始元素，然后使用最接近的元素。

$(this).siblings().addBack().closest("th");

如果其中一个同级匹配选择器，则选择第一个，否则遍历树并返回匹配的第一个。

Answer 3

插件可能会过大，但这可以起作用：

http://jsfiddle.net/eVpHG/

$.fn.myTh = function () {
    var $elem = this.first();    

    var $th = $elem.siblings('th');    
    if ($th.length)
        return $th;

    else
        return $elem.parent('tr').prev('tr').children('th');

};

Answer 4

那这个呢：

$('td').click(function () {
    if ($(this).parent().has('th').length > 0) {
        $(this).parent().find('th').css('background', 'red');
        //alert('first row!');
    } else {
        $(this).parent().prevAll('tr').has('th').first().find('th').css('background', 'red');
    }
})

基本上，我首先检查您是否选择了第一行，即包含<th> 。
如果不是这种情况，我将搜索所有先前的<tr>元素（转到DOM结构的顶部）。 只要有一个<th>元素，它就会出现在.prevAll查询中。 我将选择第一个。
现在我们在选定的<tr>选择<th> <tr> 。

我希望它不是“顶上”的^^

jsFFiddle

Answer 5

你可以用

$(this).parent().prevAll('tr').add($(this).parent()).has('th').last().find('th');

演示版