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

给出一张表格：

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

H1
1.
2.
3.
氢
21
22
23

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

---

有什么想法吗？

您正在检查的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");

---

如果同级中有一个匹配选择器，它将选择第一个，否则它将遍历树并返回第一个匹配的。一个插件可能有点过分，但这是有效的：

那么这个呢：

$('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');
    }
})

基本上，我首先检查您是否选择了第一行，即包含

的行
如果不是这样，我将搜索所有以前的

元素（转到DOM结构的顶部）。 只要有

元素，它就会出现在

.prevAll

查询中。我将选择第一个被选中的
现在我们在所选的

中选择

我希望这不是“过分”^^

您可以使用

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

---

看看兄弟姐妹，如果一个匹配，就使用它，否则就看父母。向我们展示你的尝试，我们可以帮助你解决困难。你可以使用这个。上一个，甚至是。最近的，然后扔进H1。你尝试过吗？我发誓jQuery对一切都有作用。编辑：我刚刚尝试过，它不起作用。H1

元素既不是2和3

元素的父元素，也不是它们的兄弟元素。您是否希望它知道它需要转到当前行，获取上一行，然后在其中搜索

？您好，Rory，我的原始表中缺少一些内容。这将是真实的场景：jsfiddle.net/f7gc2。我只是想不用写函数就可以了。我认为有一种“优雅”的方式可以做到这一点。这绝对有效。我只是希望有一个更“优雅”的解决方案，包括编写一个函数。您可以拆分选择器以使其看起来更优雅，但它只生成了一个大选择器：）

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