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

如果可能的话，我如何只使用选择器来做到这一点？！

Answer 1

您可以使用filter方法：

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

小提琴

Answer 2

如果可能的话，我如何只使用选择器来做到这一点？！

你不能，因为选择器不考虑文本节点（只有元素节点）。 您可以选择所有p > strong节点并测试该节点是否是其父节点的第一个子节点：

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

但是，这仅在父级确实没有任何其他节点作为第一个子节点时才有效，甚至连一个只有空格的文本节点也是如此。 也就是说，在以下情况下，此方法不会选择strong ：

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