元素相关的 CSS 选择器答案

【问题标题】：Element-relative CSS selectors元素相关的 CSS 选择器
【发布时间】：2015-06-17 19:05:45
【问题描述】：

有没有办法通过使用 CSS 选择器和 jQuery 来缩短这些类型的行？

$(element).parent('tr').parent('tbody').parent('table')

$(element).children('tbody').children('tr').children('td')

基本上是：“给我直接父母/子女，如果有的话”

我需要 100% 相等的选择器。

更新：

closest('table) 不起作用：可以返回元素本身并且可能找不到直接的父母 find('td') 不起作用：因为我只需要直接的孩子；下面的子树中可能有很多

【问题讨论】：

【解决方案1】：

您可以使用closest 获取最近的ancestor：

element.closest('table') // element.parent('tr').parent('tbody').parent('table')

对于集合中的每个元素，通过测试元素本身并向上遍历其在 DOM 树中的祖先来获取与选择器匹配的第一个元素。

和find 向下搜索DOM 树：

获取当前匹配元素集中每个元素的后代，由选择器、jQuery 对象或元素过滤。

element.find('td') // element.children('tbody').children('tr').children('td')

【讨论】：

【解决方案2】：

您可以使用.closest() 来查找与给定选择器进行数学运算的第一个祖先

element.parent('tr').parent('tbody').parent('table') -> $(element).parent('tr').closest('table')

在以下情况下，使用 find() 和 child selector

element.children('tbody').children('tr').children('td') -> element.find('> tbody > tr > td')

【讨论】：

感谢您的回答顺便说一句。我不知道可以在开头使用“>”来表示“从给定元素开始”。由于最接近是不正确的，如果你想改变它，我可以将你的答案标记为正确。
@SvenR.Kunze 在这种情况下你可以使用element.parent().closest('table') 这样它就不会找到元素本身，但会返回它的祖先之一
不完全。这意味着我将获得第一个父表。但我需要上面的结构：第一个 DIRECT 父级。不是第一个可能匹配的父母。
除根元素外的每个元素都只能有一个父元素（根元素没有）。所以要么元素的父元素匹配选择器，要么不匹配。
让我们假设 HTML 的结构如下： table > tbody > tr > td > div > div > div

【解决方案3】：

使用closest 向上移动到最接近的匹配元素。另外，使用find 搜索给定的元素（注意 find 将获取所有匹配的元素到所有现有的 DOM 树层）

element.closest('table');
element.find('td');

【讨论】：