How to get the children of the this selector

Question

I have a layout similar to this    lt div id       gt  lt img src       gt  lt  div gt    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     this    How can I get the child img using a selector

User · Answer

You could also use    this  find  img      which would return all imgs that are descendants of the div

User · Answer

You could use       lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt     this  find  img     lt  script gt

User · Answer

Try this code     this  children   0

User · Answer

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    this  children  img nth n         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     this  find  img   attr  alt                     OR     this  children  img   attr  alt     But if your div contain more img element like below    lt div class  mydiv  gt       lt img src  test png  alt  3  gt       lt img src  test png  alt  4  gt   lt  div gt    then you can t use upper code to find alt value of second img element  So you can try this      this  find  img last-child   attr  alt                      OR    this  children  img last-child   attr  alt     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    lt div class  mydiv  gt       lt img class  first  src  test png  alt  3  gt       lt img class  second  src  test png  alt  4  gt   lt  div gt    You can do this as below       this  find   first   attr  alt     and more specific as      this  find  img first   attr  alt     You can use find or children as above code  For more visit Children http   api jquery com children  and Find http   api jquery com find    See example http   jsfiddle net lalitjs Nx8a6

User · Answer

The direct children is       gt   child-class   this

User · Answer

Without knowing the ID of the DIV I think you could select the IMG like this           this  attr  id     img first

User · Answer

You can use either of the following methods   1 find         this  find  img      2 children         this  children  img

User · Answer

If your DIV tag is immediately followed by the IMG tag  you can also use     this  next

User · Answer

If your img is exactly first element inside div then try    this firstChild      x000D   x000D       box    click  function     x000D    let img     this firstChild   x000D    console log  img    x000D     x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  box  gt  lt img src  https   picsum photos seed picsum 300 150  gt  lt  div gt  x000D   x000D   x000D

User · Answer

You could also use    this  find  img      which would return all imgs that are descendants of the div

User · Answer

x000D   x000D    document  ready function     x000D       When you click the DIV  you take it with  this  x000D        my div   click function     x000D      console info  Initializing the tests      x000D      console log  Method  1      this  children  img     x000D      console log  Method  2      this  find  img     x000D         Here  i m selecting the first ocorrence of  lt IMG gt  x000D      console log  Method  3      this  find  img eq 0      x000D        x000D      x000D   the div  x000D    background-color  yellow  x000D    width  100   x000D    height  200px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  my div  class  the div  gt  x000D     lt img src       gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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    this  children  img nth n         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     this  find  img   attr  alt                     OR     this  children  img   attr  alt     But if your div contain more img element like below    lt div class  mydiv  gt       lt img src  test png  alt  3  gt       lt img src  test png  alt  4  gt   lt  div gt    then you can t use upper code to find alt value of second img element  So you can try this      this  find  img last-child   attr  alt                      OR    this  children  img last-child   attr  alt     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    lt div class  mydiv  gt       lt img class  first  src  test png  alt  3  gt       lt img class  second  src  test png  alt  4  gt   lt  div gt    You can do this as below       this  find   first   attr  alt     and more specific as      this  find  img first   attr  alt     You can use find or children as above code  For more visit Children http   api jquery com children  and Find http   api jquery com find    See example http   jsfiddle net lalitjs Nx8a6

User · Answer

Try this code     this  children   0

User · Answer

You can use Child Selecor to reference the child elements available within the parent        gt  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  gt  img   attr  src

User · Answer

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

User · Answer

Ways to refer to a child in jQuery  I summarized it in the following jQuery      this  find  img       any img tag child or grandchild etc         this  children  img      any img tag child that is direct descendant    this  find  img first     any img tag first child or first grandchild etc      this  children  img first     the first img tag  child that is direct descendant    this  children  img nth-child 1      the img is first direct descendant child   this  next      the img is first direct descendant child

User · Answer

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   jQuery this  find  img      If the imgs you desire are only direct descendants of the clicked element  you can also use  children     jQuery this  children  img

User · Answer

Ways to refer to a child in jQuery  I summarized it in the following jQuery      this  find  img       any img tag child or grandchild etc         this  children  img      any img tag child that is direct descendant    this  find  img first     any img tag first child or first grandchild etc      this  children  img first     the first img tag  child that is direct descendant    this  children  img nth-child 1      the img is first direct descendant child   this  next      the img is first direct descendant child

User · Answer

You could also use    this  find  img      which would return all imgs that are descendants of the div

User · Answer

You could also use    this  find  img      which would return all imgs that are descendants of the div

User · Answer

You can use Child Selecor to reference the child elements available within the parent        gt  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  gt  img   attr  src

User · Answer

If your img is exactly first element inside div then try    this firstChild      x000D   x000D       box    click  function     x000D    let img     this firstChild   x000D    console log  img    x000D     x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  box  gt  lt img src  https   picsum photos seed picsum 300 150  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Try this code     this  children   0

User · Answer

jQuery s each is one option    lt div id  test  gt       lt img src  testing png   gt       lt img src  testing1 png   gt   lt  div gt       test img   each function        console log   this  attr  src

User · Answer

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   jQuery this  find  img      If the imgs you desire are only direct descendants of the clicked element  you can also use  children     jQuery this  children  img

User · Answer

Without knowing the ID of the DIV I think you could select the IMG like this           this  attr  id     img first

User · Answer

You could use       lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt     this  find  img     lt  script gt

User · Answer

The direct children is       gt   child-class   this

User · Answer

Without knowing the ID of the DIV I think you could select the IMG like this           this  attr  id     img first

User · Answer

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

User · Answer

Here s a functional code  you can run it  it s a simple demonstration     When you click the DIV you get the image from some different methods  in this situation  this  is the DIV    x000D   x000D    document  ready function     x000D       When you click the DIV  you take it with  this  x000D        my div   click function     x000D      console info  Initializing the tests      x000D      console log  Method  1      this  children  img     x000D      console log  Method  2      this  find  img     x000D         Here  i m selecting the first ocorrence of  lt IMG gt  x000D      console log  Method  3      this  find  img eq 0      x000D        x000D      x000D   the div  x000D    background-color  yellow  x000D    width  100   x000D    height  200px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  my div  class  the div  gt  x000D     lt img src       gt  x000D   lt  div gt  x000D   x000D   x000D    Hope it helps

User · Answer

jQuery s each is one option    lt div id  test  gt       lt img src  testing png   gt       lt img src  testing1 png   gt   lt  div gt       test img   each function        console log   this  attr  src

User · Answer

Without knowing the ID of the DIV I think you could select the IMG like this           this  attr  id     img first

User · Answer

If your DIV tag is immediately followed by the IMG tag  you can also use     this  next

User · Answer

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   jQuery this  find  img      If the imgs you desire are only direct descendants of the clicked element  you can also use  children     jQuery this  children  img

User · Answer

Try this code     this  children   0

User · Answer

You can use either of the following methods   1 find         this  find  img      2 children         this  children  img

User · Answer

Also this should work       id img

User · Answer

Here s a functional code  you can run it  it s a simple demonstration     When you click the DIV you get the image from some different methods  in this situation  this  is the DIV    x000D   x000D    document  ready function     x000D       When you click the DIV  you take it with  this  x000D        my div   click function     x000D      console info  Initializing the tests      x000D      console log  Method  1      this  children  img     x000D      console log  Method  2      this  find  img     x000D         Here  i m selecting the first ocorrence of  lt IMG gt  x000D      console log  Method  3      this  find  img eq 0      x000D        x000D      x000D   the div  x000D    background-color  yellow  x000D    width  100   x000D    height  200px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  my div  class  the div  gt  x000D     lt img src       gt  x000D   lt  div gt  x000D   x000D   x000D    Hope it helps

User · Answer

You may have 0 to many  lt img gt  tags inside of your  lt div gt      To find an element  use a  find       To keep your code safe  use a  each       Using  find   and  each   together prevents null reference errors in the case of 0  lt img gt  elements while also allowing for handling of multiple  lt img gt  elements    x000D   x000D     Set the click handler on your div x000D     body   off  click     mydiv   on  click     mydiv   function     x000D   x000D       Find the image using find   and  each   x000D      this  find  img   each function     x000D     x000D          var img   this       this  is  now  scoped to the image element x000D           x000D             Do something with the image x000D            this  animate   x000D            width     this  width    gt  100   100     this  width     100     px  x000D             500   x000D           x000D        x000D     x000D      x000D   mydiv   x000D    text-align  center  x000D    vertical-align  middle  x000D    background-color   000000  x000D    cursor  pointer  x000D    padding  50px  x000D     x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  mydiv  gt  x000D     lt img src    width  100  height  100   gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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   jQuery this  find  img      If the imgs you desire are only direct descendants of the clicked element  you can also use  children     jQuery this  children  img

User · Answer

Also this should work       id img

User · Answer

You may have 0 to many  lt img gt  tags inside of your  lt div gt      To find an element  use a  find       To keep your code safe  use a  each       Using  find   and  each   together prevents null reference errors in the case of 0  lt img gt  elements while also allowing for handling of multiple  lt img gt  elements    x000D   x000D     Set the click handler on your div x000D     body   off  click     mydiv   on  click     mydiv   function     x000D   x000D       Find the image using find   and  each   x000D      this  find  img   each function     x000D     x000D          var img   this       this  is  now  scoped to the image element x000D           x000D             Do something with the image x000D            this  animate   x000D            width     this  width    gt  100   100     this  width     100     px  x000D             500   x000D           x000D        x000D     x000D      x000D   mydiv   x000D    text-align  center  x000D    vertical-align  middle  x000D    background-color   000000  x000D    cursor  pointer  x000D    padding  50px  x000D     x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  mydiv  gt  x000D     lt img src    width  100  height  100   gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D    document  ready function     x000D       When you click the DIV  you take it with  this  x000D        my div   click function     x000D      console info  Initializing the tests      x000D      console log  Method  1      this  children  img     x000D      console log  Method  2      this  find  img     x000D         Here  i m selecting the first ocorrence of  lt IMG gt  x000D      console log  Method  3      this  find  img eq 0      x000D        x000D      x000D   the div  x000D    background-color  yellow  x000D    width  100   x000D    height  200px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  my div  class  the div  gt  x000D     lt img src       gt  x000D   lt  div gt  x000D   x000D   x000D

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

Examples related to javascript

Examples related to jquery

Examples related to jquery-selectors