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 '';
    }
}

Example fiddle

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查询中。我将选择第一个被选中的人。
现在我们选择所选<th>中的<tr>。

我希望它不是“超过顶部”^^

<强> jsFFiddle

Answer 5

您可以使用

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

Demo

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

5 个答案: