选择无文本兄弟姐妹的内联元素

Question

我需要选择其父元素中唯一的内联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，但它们与这两个元素匹配。

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

Answer 2

一个人必须检查子节点是否是单个且其结节。jQuery的contents（）方法将获得所有子节点，包括文本和评论。

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

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>

也在操场上。

Answer 3

要实现此目的，您可以检查元素的contents()的长度：

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

请注意，虽然这可以通过空格破坏。您需要将父母和子女元素保留在代码中的同一条线上，而没有空格将它们分开。

Answer 4

您可以通过CSS和JavaScript的一点组合来完成此操作（在这里jQuery for Brevity）。

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

:only-child选择器以没有元素兄弟姐妹的元素开始搜索。然后，如果有一个previous/nextSibling，则会返回文本节点，如果不是null。如果双方都是null，则没有文本节点兄弟姐妹，因此该元素确实是一个人。

Answer 5

您可以使用 :first从多个：

获得第一个p标签

$("p:first)