How to get first child with specify element in JQuery?

Question

I have following HTML..

<div class = "thumbnail">
  <img src = "somePath">
</div>
 <div class = "thumbnail">
  <img src = "somePath">
</div>
<div class = "thumbnail">
  <img src = "somePath">
</div>
<div class = "thumbnail">
  <a href = "someLink"><img src = "somePath"></a>
</div>
<div class = "thumbnail">
  <a href = "someLink"><img src = "somePath"></a>
</div>

I want to iterate img tags under the first child of div.thumbnail. I want to filter them out. I use as..

var i =0;
$("div.thumbnail :first-child").each(function() {
    console.log("Touch "+(++i)+" time(s) !");
    if($(this).context.nodeName.toLowerCase() == 'img') {
        console.log("Getting Image Tag.");
    }
});

My question is I want to filter in getting elements ..

$("div.thumbnail :first-child :img").each(function(){});

I don't want to iterate as count of div.thumbnail . I want to iterate as count of div.thumbnail with first child tag is img. How to figure it out ?

Itay · Accepted Answer · 2013-09-12 03:50:30Z

2

Use the :has() Selector

$("div.thumbnail:has( > img:first-child)").each(function(){});

jsFiddle Demo

edited Sep 12, 2013 at 3:50

answered Sep 12, 2013 at 3:43

Itay

16.8k2 gold badges56 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cataclysm Over a year ago

I also got with your answer ! Cheer .. :) now. Thanks.

Khawer Zeshan · Accepted Answer · 2013-09-12 03:50:04Z

1

Simple

$(".thumbnail > img").each(function(){
    //
});

This will skip the following divs where first child is not an img

<div class = "thumbnail">
  <a href = "someLink"><img src = "somePath"></a>
</div>

FIDDLE

answered Sep 12, 2013 at 3:50

Khawer Zeshan

9,6568 gold badges43 silver badges63 bronze badges

4 Comments

Itay Over a year ago

He's trying to get the parents not the children

Itay Over a year ago

I'm just saying you asked in the Original Post how to iterate the parents, and this code is iterating the children.

Cataclysm Over a year ago

@Itay , Thanks for guiding me. And I asked I want to iterate img tags.

Itay Over a year ago

According to the parents... You said it specifically

Rickyrock · Accepted Answer · 2013-09-12 04:21:26Z

1

$(".thumbnail:has('> img:first-child'),.thumbnail > img:first-child").each(function(){
     //TO Do here
});

DEMO

answered Sep 12, 2013 at 4:21

Rickyrock

3262 gold badges6 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to get first child with specify element in JQuery?

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related