如何获取与选择器匹配的最接近的父级或同级

How to get the closest parent OR sibling that matches a selector?

本文关键字：最接近 选择器 何获取 获取      更新时间：2023-09-26

给定一个表：

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

有什么想法吗？

这个呢：

$('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>。

我希望它不是"过分"^^

jsFFiddle

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

示例小提琴

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

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

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

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

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');
};
您可以使用 

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

演示

相关文章：