如何使用JQuery選擇器在子元素存在或不存在時查找元素？

下面是一個簡單的html代碼：如何使用JQuery選擇器在子元素存在或不存在時查找元素？

<div class="container"> 
    <div class="zone"> 
     <img class="thumb" alt="GG"> 
    </div> 
    <div class="zone"> 
     <span>&nbsp;</span> 
    </div> 
    <div class="zone"> 
     <img class="thumb" alt="HH"> 
    </div> 
</div>

我想所有div與zone類有img與alt=GG或沒有img都匹配。

下面的代碼不起作用：

$('div.zone img[alt="GG"], :not(div.zone:has(img))')

來源

2013-06-28 Stephan

-1

試試這個。它確認作品，通緝區域與RED接壤。（編輯：謝謝PSL）

$(document).ready(function(){ 
$("div.zone:has(img[alt='GG']),div.zone:not(:has(img))").css("border","1px solid red"); 
});

來源

2013-06-28 01:40:16 CalebC

這不給這個圖像和一個div的div。而不是符合標準的2個div。 – PSL

這裏是一個小提琴http://jsfiddle.net/Tp94n/ – PSL

現在你編輯它與我的答案有什麼不同？我把年齡回來了。 – PSL

你不需要爲jQuery的做到這一點。只是CSS選擇器，你可以做到這一點：DEMO

這裏是CSS選擇器：

.container > div.zone img, 
.container > div.zone img[alt="GG"] { 
    background: red; 
}

乾杯，獅子座！

來源

2013-06-28 01:16:28 leoMestizo

對不起，您的答案是不正確的，因爲它不匹配第二個div。 – Stephan

我更新了代碼。 – leoMestizo

可以使用filter方法

$('div.zone').filter(function() { 
    return !$(this).find('img').length || $(this).find('img[alt="GG"]').length 
});

Check Fiddle

來源

2013-06-28 01:17:09

我更喜歡只有選擇器的解決方案。 – Stephan

你可以試試這個：

var $specialDivs= $('div.zone:has("img[alt="GG"]"), div.zone:not(:has(img))'); 
          ^^      ^ ^
           | |       |  | 
         div.zone has image with alt  div.zone not having any image

Fiddle

問題與您的選擇器是'div.zone img[alt="GG"] div和圖像之間的空間將查找div.zone的子項具有alt屬性的圖像。而圖像是div.zone的直接後裔，因此您的選擇器不會爲您帶來任何好處。

來源

2013-06-28 01:18:02 PSL

如何使用JQuery選擇器在子元素存在或不存在時查找元素？

回答

相關問題