在jQuery或JavaScript中，选择与父元素相邻的子元素

Question

我正在尝试选择与父元素相连的子元素。例如，在以下HTML中，我只想选择第二个和第四个段落的子元素（strong），因为在这两种情况下，子元素和父元素是相邻的（即子元素和父元素之间没有文本或标记）：

<p>This is line <strong>number one</strong></p>
<p><strong>This is line number two</strong></p>
<p>This <strong>is line number three</strong></p>
<p><strong>This is line</strong> number four</p>

如有可能，我该如何仅使用选择器来完成这个任务？！

- Nick

Answer 1

你可以使用filter方法：

$('p > strong').filter(function(){
   return !this.previousSibling;
});

FIDDLE

- Ram

---

感谢提供简洁的解决方案。 - Nick

Answer 2

如果可能的话，你怎么只用选择器实现这个呢？不行，因为选择器不考虑文本节点（只考虑元素节点）。你可以选择所有 p > strong 节点并测试该节点是否是其父节点的第一个子节点。

$('p > strong').filter(function() {
    return this === this.parentNode.firstChild;
});

然而，这仅在父元素没有其他节点作为第一个子节点时有效，即使只有包含空格的文本节点。例如，在以下情况下，此方法将无法选择：

<p>
    <strong>This is line</strong> number four
</p>

如果你想忽略只包含空格的文本节点，你可以检查第一个子节点是否是这样的节点：

$('p > strong:nth-child(1)').filter(function() {
    var firstChild =  this.parentNode.firstChild;
    return firstChild === this ||
           firstChild.nodeName === 'TEXT' && !$.trim(firstChild.nodeValue);
});

为了让筛选条件更简单，我使用了 strong:nth-child(1)，这样只会选择一个 strong 元素，只有当它是其父元素的第一个（子）元素时。

- Felix Kling

---

感谢您的解释和示例。 - Nick