jQuery選擇器來確定'或'？

比方說，我的HTML可能看起來兩種方法之一：jQuery選擇器來確定'或'？

選項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>

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

來源

2009-11-06 DA.

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

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

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

來源

2009-11-06 19:14:35 tvanfosson

謝謝！ .andSelf（）看起來是完美的解決方案。我可以看到很多保險絲。 –

似乎無法得到這個工作，它似乎不匹配一個簡單的H2？看到http://jsbin.com/imico/edit –

這不起作用，是錯誤的答案.. @Morningcoffee得到它正確 –

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

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

來源

2009-11-06 19:20:03

我喜歡你，你可以在集合上進行操作，而不必通過每一個都進行foreach。 – Mark

這是..正確答案 –

意識到這將遍歷整個DOM兩次，每個選擇器一次 - Sizzle在每個選擇器上被整個文檔調用一次。我的答案遍歷DOM一次。 – tvanfosson

jQuery選擇器來確定'或'？

回答

相關問題