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> 

是否有一個聰明的選擇，將檢測上述兩種情景？當然，我可以首先檢查一下，看看我的頭文件中是否有一個「蘋果」類的跨度。如果是這樣，那麼做，否則，那樣做。不過，我想知道是否有更優雅和更詳細的解決方案。

Answer 1

我想使用一個兒童過濾器，然後andSelf（）將工作得到兩者。然後您可以使用第一個選擇正確的一個。如果孩子是空的，那麼首先將是唯一的元素，即標題。

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

更新使用濾波器（）（而不是第二查找）。

Answer 2

以下選擇器選擇不具有一個<span>元件或具有<h2>作爲父<span>元件所有<h2>的。

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