选择没有文本兄弟的内联元素答案

【问题标题】：Select inline elements without text siblings选择没有文本兄弟的内联元素
【发布时间】：2016-06-17 18:51:59
【问题描述】：

我需要选择其父元素内唯一的内联 HTML 元素 - 也就是说，在它们之前或之后没有文本或其他内联元素。

<p><img src="foo.jpg"></p><!-- This should be selected -->
<p>Hello world! <img src="bar.jpg"></p><!-- This should not -->

有什么方法可以用 CSS 或 jQuery 做到这一点？我试过 :first-child 和 :first-of-type 但它们都匹配这两个元素。

【问题讨论】：

当然不是 CSS。
保持什么作为目标点？？ p 标签？？
空白节点算不算？
空白节点不计算在内。 p 标签或里面的元素都可以满足我的需要，因为我需要对元素进行一些额外的处理，并且使用 JS 从另一个中派生一个是微不足道的。

标签： jquery html css css-selectors

【解决方案1】：

.children() 将是您想要的选定孩子。如果您想稍后使用它们或仅使用console.log() 打印它们，您可以将它们添加到数组中

$('p').each(function() {
    if ($(this).text().length === 0) {
        $(this).children();
    }
});

正如所指出的，如果 <a> 存在其中包含文本（即 <a href="www.google.com">Google</a> 则上面的代码将不起作用。如果您处于以下情况，它的孩子有自己的文本，请使用 val()改为：

$('p').each(function() {
    if ($(this).val().length === 0) {
        $(this).children();
    }
});

【讨论】：

也使用trim() 或$.trim() 来避免空格
在我添加了 .trim() 以从文本内容中删除任何空白之后，这就像一个魅力。谢谢！
还有一个条件。 “孩子”应该只有一个。它不应该有兄弟姐妹
这也会选择两张图片。
我不知道@Kaivosukeltaja 是否要选择另一个元素，不仅是图像，而且使用此代码，您无法选择一个带有文本的元素，例如链接。

【解决方案2】：

必须检查子节点是否为单个及其nodeType。 jQuery 的contents() 方法将获取所有子节点，包括文本和 cmets。

下面是一个示例脚本，它将标记单个节点，以及包含单个节点的段落：

var notAcceptableNodeTypes = [3, 4, 8];
$('p').filter(function() {
    var nodes = $(this).contents();
    var isSingle = nodes.length==1 && $.inArray(nodes[0].nodeType, notAcceptableNodeTypes) == -1;
    if( isSingle ) nodes.addClass('is-single');
    return isSingle;
}).addClass('no-text');

.no-text {
    border: 2px solid red;
}
.is-single {
    border: 2px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><img src="http://placehold.it/75x75"></p>
<p>Hello world! <img src="http://placehold.it/75x75"></p>
<p><img src="http://placehold.it/75x75"><img src="http://placehold.it/75x75"></p>
<p>Hello world!</p>
<p><!-- COMMENT --><img src="http://placehold.it/75x75"></p>

同样在Playground。

【讨论】：

【解决方案3】：

为此，您可以检查元素的contents() 的长度：

var $p = $('p').filter(function() {
    return $(this).contents().length == 1;
});

请注意，这可能会被空格打破。您需要在代码中将父元素和子元素保持在同一行，并且没有空格分隔它们。

【讨论】：

【解决方案4】：

您可以通过一点点 CSS 和 JavaScript 的组合来做到这一点（这里是 jQuery 为简洁起见）。

var children = $(":only-child").filter(function() {
    return !this.previousSibling && !this.nextSibling;
});

:only-child 选择器从没有元素兄弟的元素开始搜索。然后previous/nextSibling 将返回一个文本节点，如果有的话，或者null 如果没有。如果两边都是null，那么就没有文本节点兄弟，所以元素是真正单独的。

【讨论】：

【解决方案5】：

您可以使用:first 从多个中获取第一个 p 标签：

$("p:first)

【讨论】：