How to get the children of the $(this) selector?

0 votes
asked Nov 20, 2008 by alex

I have a layout similar to this:

<div id="..."><img src="..."></div>

and would like to use a jQuery selector to select the child img inside the div on click.

To get the div, I've got this selector:


How can I get the child img using a selector?

16 Answers

0 votes
answered Nov 20, 2008 by maxam

Try this code:

0 votes
answered Nov 20, 2008 by adam

Without knowing the ID of the DIV I think you could select the IMG like this:

$("#"+$(this).attr("id")+" img:first")
0 votes
answered Nov 20, 2008 by philnash

You could also use


which would return all imgs that are descendants of the div

0 votes
answered Nov 20, 2008 by simon

The jQuery constructor accepts a 2nd parameter called context which can be used to override the context of the selection.

jQuery("img", this);

Which is the same as using .find() like this:


If the imgs you desire are only direct descendants of the clicked element, you can also use .children():

0 votes
answered Nov 21, 2011 by roccivic

If your DIV tag is immediately followed by the IMG tag, you can also use:

0 votes
answered Nov 21, 2011 by rakslice

If you need to get the first img that's down exactly one level, you can do

0 votes
answered Nov 16, 2012 by rayron-victor

The direct children is

$('> .child', this)
0 votes
answered Nov 22, 2013 by lalit-kumar

You can find all img element of parent div like below

$(this).find('img') or $(this).children('img')

If you want specific img element you can write like this

// where n is the child place in parent list start from 0 onwards

Your div contain only one img element. So for this below is right


But if your div contain more img element like below

<div class="mydiv">
    <img src="test.png" alt="3">
    <img src="test.png" alt="4">

then you can't use upper code to find alt value of second img element. So you can try this:


This example shows a general idea that how you can find actual object within parent object. You can use classes to differentiate your child object. That is easy and fun. i.e.

<div class="mydiv">
    <img class='first' src="test.png" alt="3">
    <img class='second' src="test.png" alt="4">

You can do this as below :


and more specific as:


You can use find or children as above code. For more visit Children and Find See example

0 votes
answered Nov 26, 2013 by thirumalai-murugan

jQuery's each is one option:

<div id="test">
    <img src="testing.png"/>
    <img src="testing1.png"/>

$('#test img').each(function(){
0 votes
answered Nov 25, 2014 by dennis-r

You can use Child Selecor to reference the child elements available within the parent.

$(' > img', this).attr("src");

And the below is if you don't have reference to $(this) and you want to reference img available within a div from other function.

 $('#divid > img').attr("src");
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter