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

时间:2013-02-04 22:51:06

标签: javascript jquery

我正在尝试找到具有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'))
}

但它不起作用。反正有没有这样做?非常感谢!

4 个答案:

答案 0 :(得分:3)

我建议:

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

JS Fiddle demo

此方法查找img.img元素,然后查看这些图片的父级,以查找具有div属性的id元素。 get()方法将选择转换为数组。

参考文献:

答案 1 :(得分: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

答案 2 :(得分:1)

您可以使用:

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

这与@David Thomas的答案相同,只是使用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>

答案 3 :(得分:0)

你可以使用jQuery来迭代父母。

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