只有在具有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>