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

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()将是您想要的选定 child 。如果您想稍后使用它们或者只是使用 console.log() 打印它们，您可以将它们添加到数组中

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

如前所述，如果 <a>里面有文本(即 <a href="www.google.com">Google</a> 那么上面的代码将不起作用。如果您处于以下情况，它的 child 有自己的文本，请在条件中使用 val() 代替:

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