只有在具有id屬性的情況下選擇父div纔可以

Question

我試圖找到具有id屬性的第一個父項div。

的選擇是'div .img'，它可以是任何div嵌套

<div id='div1'> 

<div id='div2'> first nested parent div 

     <div>second div 
      <img class='img' src='test.jpg'/> 
     </div> 

</div> 

<div> //this div has no id 
     <div>another div 
      <img class='img' src='cookie.jpg'/> 
     </div> 
<div> 

</div> 

的選擇

$('div.img') 

應該輸出

div2 
div1 

div2 shows first becasue div2 has id attribute and it is the parent of the test.img 
div1 shows next becasue cookie is the second image and the first parent div that has div1 id 

我已經試過裏面

if($('div .img').find('.img').closest('div').attr('id')){ 
    console.log($('div.img').closest('div').attr('id')) 
} 

但它不起作用。有沒有辦法做到這一點？非常感謝！

Answer 1

var IamadivparentandhaveanId=$('div').find('img').closest('div[id]'); 

或使用類：根據註釋

$('div').find('img.img').closest('div[id]'); 

或

$('.img').closest('div[id]'); 

編輯澄清使用只找到他們一次：

$('img.img').each(function(){ 
    $(this).closest('div[id]'); 
});// or use .filter if that is perferred 

Answer 2

我建議：

var divsWithIDs = $('img.img').parents('div[id]').get(); 
console.log(divsWithIDs); 

JS Fiddle demo。

此方法查找img.img元素，然後查看這些圖像的父項以查找具有id屬性的那些元素div。 get()方法將選擇轉換爲數組。

參考文獻：

• get()。
• parents()。

Answer 3

您可以使用jQuery每個遍歷的父母。

$('div img').each(function (a, b) { 
    var x = $(b).parent(); 
    while (x && !x.attr('id')) { 
     x = x.parent(); 
    } 
    console.log(x.attr('id')); 
}); 

Answer 4

您可以使用：

var $divsWithIds = $('img.img').closest('div[id]'); 

這是一樣的@大衛托馬斯的答案，除了使用closest代替parents。它使用「.img」類選擇所有「img」元素，然後爲每個元素獲取最接近的父元素。

在下列情況下，使用parents()將包括 「DIV1」 和 「DIV2」，而使用closest()將僅返回 'DIV2'：

<div id='div1'> 
    <div id='div2'> 
     <div> 
      <img id="img1" class='img' src='test.jpg'/> 
     </div> 
    </div> 
</div> 

<div> 
     <img id="img2" class='img' src='cookie.jpg'/> 
<div>