Question

假设我的HTML可能有以下两种方式之一：

选项1：

<h2>My header
    <span class="apple">My Span</span>
</h2>

选项2：

<h2>My header</h2>

通过jAuery，我想将一个跨度附加到嵌套跨度（如果它在那里）或直接附加到标题，导致其中一个：

选项1：

<h2>My header
    <span class="apple">My Span
        <span>My Span Inserted via jQuery</span>
    </span>
</h2>

选项2：

<h2>My header
    <span>My Span Inserted via jQuery</span>
</h2>

是否有一个聪明的选择器可以检测上述两种情况？当然，我可以首先检查我的标题是否有一个带有“apple”类的跨度。如果是这样，那就这样做，否则就这样做。不过，我想知道是否有一个更优雅，更简洁的解决方案。

Answer 1

以下选择器会选择没有<h2>元素或一个<span>元素且<span>作为父元素的所有<h2>

$("h2:not(:has(span)), h2 > span")
      .append("<span>My Span Inserted via jQuery</span>");

Answer 2

我认为使用子过滤器，然后使用andSelf（）可以同时获得两者。然后，您可以使用第一个选择正确的。如果子项为空，则首先是唯一的元素，即标题。

$('h2').each( function() {
    $(this).children('span')
           .andSelf()
           .filter(':first')
           .append('<span>My Span Inserted via JQuery</span>');
});

更新了以使用filter（）（而不是第二次查找）。

jQuery选择器确定'或'？

2 个答案: