0

给定一张桌子：

<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。

有任何想法吗？

4

5 回答 5

0

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

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

如果其中一个兄弟姐妹匹配选择器，它将选择第一个，否则它将遍历树并返回匹配的第一个。

于 2013-11-08T15:42:06.697 回答
0

一个插件可能是矫枉过正，但这有效：

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

};
于 2013-11-08T15:45:49.330 回答
0

你可以使用

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

演示

于 2013-11-08T16:43:20.393 回答
0

您正在检查的 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 '';
    }
}

示例小提琴

于 2013-11-08T15:39:16.337 回答
0

那这个呢：

$('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>在 selected 中选择<tr>。

我希望它不是“过头”^^

jsFFiddle

于 2013-11-08T15:59:09.067 回答