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

必须检查子节点是否为单个节点及其nodeType。 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>

同样在Playground。

Answer 3

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

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

请注意，这可以通过空格来打破。您需要将父元素和子元素保留在代码中的同一行，而不要将空格分开。

Answer 4

你可以通过CSS和JavaScript的一些组合来实现这一点（jQuery在这里是为了简洁起见）。

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

:only-child选择器使用没有元素兄弟的元素开始搜索。然后previous/nextSibling会返回一个文本节点（如果有的话），如果没有，则返回null。如果双方都是null，则没有文本节点的兄弟节点，因此该元素是真正独自的。

Answer 5

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

$("p:first)

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

5 个答案: