jQuery选择器确定'或'？

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>");