javascript - 仅当父 div 具有 id 属性时才选择它

Question

我正在尝试找到第一个div具有id属性的父级。

选择器是'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 divsWithIDs = $('img.img').parents('div[id]').get();
console.log(divsWithIDs);

JS 小提琴演示。

这种方法查找img.img元素，然后查看这些图像的父div元素以找到具有id属性的元素。该get()方法将选择转换为数组。

参考：

• get().
• parents().

Answer 2

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 3

您可以使用：

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

这与@David Thomas 的答案相同，除了使用closest而不是parents. 它选择所有具有“.img”类的“img”元素，然后为每个元素获取最近的父元素。

在以下情况下，usingparents()将同时包含“div1”和“div2”，而 usingclosest()将仅返回“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>

Answer 4

您可以使用 jQuery each 来迭代父母。

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