How to select a single child element using jQuery

Question

Using jQuery how do I select a single child element  I ve looked at the Traversing API and know I can select all the immediate children img elements like this     this  children  img      And to select the first child img element I could use a subscript like this     this  children  img   0     But I guess I m kind of surprised I can t do this     this  child  img       no subscript  returns single element   Or have I missed something

User · Answer

You can target the first child element with just using CSS selector with jQuery:

$(this).children('img:nth-child(1)');

If you want to target the second child element just change 1 to 2:

$(this).children('img:nth-child(2)');

and so on..

if you want to target more elements, you can use a for loop:

for (i = 1; i <= $(this).children().length; i++) {
    let childImg =  $(this).children("img:nth-child("+ i +")");
    // Do stuff...
}

User · Answer

I think what you want to do is this     this  children  img   eq 0     this will give you a jquery object containing the first img element  whereas     this  children  img   0     will give you the img element itself

User · Answer

lt html gt   lt title gt        lt  title gt       lt meta name  viewport  content  width device-width  initial-scale 1  gt       lt link rel  stylesheet  type  text css  href  assets css bootstrap css  gt   lt body gt       lt  --  lt asp LinkButton ID  MoreInfoButton  runat  server  Text   lt   MoreInfo  gt    gt  -- gt    lt  --  lt  asp LinkButton gt  -- gt   lt  --  lt  asp LinkButton gt  -- gt    lt br   gt   lt asp Repeater ID  Repeater1  runat  server  DataSourceID  SqlDataSource1  gt   lt div gt   lt a gt  lt span id  imgDownArrow 0  class  glyphicon glyphicon-chevron-right   runat  server  gt  MoreInformation lt  span gt  lt  a gt   lt div id  parent  class  dataContentSectionMessages  style  display none  gt       lt  -- repeater1 starts -- gt           lt  --  lt sc text field  Event Description  runat  server  item   lt   Container DataItem   gt     gt  -- gt               lt ul   gt                   lt li  gt  lt h6 gt  lt strong gt lorem lt  strong gt  lt  h6 gt  lt  li gt                   lt li  gt  lt h6 gt  lt strong gt An assigned contact who knows you and your lorem analysis system lt  strong gt  lt  h6 gt  lt  li gt                   lt li  gt  lt h6 gt  lt strong gt Internet accessible on-demand information and an easy to use internet shop lt  strong gt  lt  h6 gt  lt  li gt                   lt li  gt  lt h6 gt  lt strong gt Extensive and flexible repair capabilities at any location lt  strong gt  lt  h6 gt  lt  li gt                   lt li  gt  lt h6 gt  lt strong gt Full Service Contracts lt  strong gt  lt  h6 gt  lt  li gt                   lt li  gt  lt h6 gt  lt strong gt Maintenance Contracts lt  strong gt  lt  h6 gt  lt  li gt               lt  ul gt       lt  -- repeater1 ends -- gt   lt  div gt   lt  div gt   lt div gt   lt a gt  lt span id  imgDownArrow 0  class  glyphicon glyphicon-chevron-right   runat  server  gt  MoreInformation lt  span gt  lt  a gt   lt div id  parent  class  dataContentSectionMessages  style  display none  gt       lt  -- repeater1 starts -- gt           lt  --  lt sc text field  Event Description  runat  server  item   lt   Container DataItem   gt     gt  -- gt               lt ul   gt                   lt li  gt  lt h6 gt  lt strong gt lorem lt  strong gt  lt  h6 gt  lt  li gt                   lt li  gt  lt h6 gt  lt strong gt An assigned contact who knows you and your lorem analysis system lt  strong gt  lt  h6 gt  lt  li gt                   lt li  gt  lt h6 gt  lt strong gt Internet accessible on-demand information and an easy to use internet shop lt  strong gt  lt  h6 gt  lt  li gt                   lt li  gt  lt h6 gt  lt strong gt Extensive and flexible repair capabilities at any location lt  strong gt  lt  h6 gt  lt  li gt                   lt li  gt  lt h6 gt  lt strong gt Full Service Contracts lt  strong gt  lt  h6 gt  lt  li gt                   lt li  gt  lt h6 gt  lt strong gt Maintenance Contracts lt  strong gt  lt  h6 gt  lt  li gt               lt  ul gt       lt  -- repeater1 ends -- gt   lt  div gt   lt  div gt   lt div gt   lt a gt  lt span id  imgDownArrow 0  class  glyphicon glyphicon-chevron-right   runat  server  gt  MoreInformation lt  span gt  lt  a gt   lt div id  parent  class  dataContentSectionMessages  style  display none  gt       lt  -- repeater1 starts -- gt           lt  --  lt sc text field  Event Description  runat  server  item   lt   Container DataItem   gt     gt  -- gt               lt ul   gt                   lt li  gt  lt h6 gt  lt strong gt lorem lt  strong gt  lt  h6 gt  lt  li gt                   lt li  gt  lt h6 gt  lt strong gt An assigned contact who knows you and your lorem analysis system lt  strong gt  lt  h6 gt  lt  li gt                   lt li  gt  lt h6 gt  lt strong gt Internet accessible on-demand information and an easy to use internet shop lt  strong gt  lt  h6 gt  lt  li gt                   lt li  gt  lt h6 gt  lt strong gt Extensive and flexible repair capabilities at any location lt  strong gt  lt  h6 gt  lt  li gt                   lt li  gt  lt h6 gt  lt strong gt Full Service Contracts lt  strong gt  lt  h6 gt  lt  li gt                   lt li  gt  lt h6 gt  lt strong gt Maintenance Contracts lt  strong gt  lt  h6 gt  lt  li gt               lt  ul gt       lt  -- repeater1 ends -- gt   lt  div gt   lt  div gt   lt div gt   lt a gt  lt span id  imgDownArrow 0  class  glyphicon glyphicon-chevron-right   runat  server  gt  MoreInformation lt  span gt  lt  a gt   lt div id  parent  class  dataContentSectionMessages  style  display none  gt       lt  -- repeater1 starts -- gt           lt  --  lt sc text field  Event Description  runat  server  item   lt   Container DataItem   gt     gt  -- gt               lt ul   gt                   lt li  gt  lt h6 gt  lt strong gt lorem lt  strong gt  lt  h6 gt  lt  li gt                   lt li  gt  lt h6 gt  lt strong gt An assigned contact who knows you and your lorem analysis system lt  strong gt  lt  h6 gt  lt  li gt                   lt li  gt  lt h6 gt  lt strong gt Internet accessible on-demand information and an easy to use internet shop lt  strong gt  lt  h6 gt  lt  li gt                   lt li  gt  lt h6 gt  lt strong gt Extensive and flexible repair capabilities at any location lt  strong gt  lt  h6 gt  lt  li gt                   lt li  gt  lt h6 gt  lt strong gt Full Service Contracts lt  strong gt  lt  h6 gt  lt  li gt                   lt li  gt  lt h6 gt  lt strong gt Maintenance Contracts lt  strong gt  lt  h6 gt  lt  li gt               lt  ul gt       lt  -- repeater1 ends -- gt   lt  div gt   lt  div gt       lt  asp Repeater gt     lt  body gt   lt  -- Predefined JavaScript -- gt   lt script src  jquery js  gt  lt  script gt   lt script src  bootstrap js  gt  lt  script gt    lt script gt      function                 a   click function                   this  parent   children   dataContentSectionMessages   slideToggle                              lt  script gt     lt  html gt

User · Answer

Not jQuery  as the question asks for  but natively  i e   no libraries required  I think the better tool for the job is querySelector to get a single instance of a selector  let el   document querySelector  img    console log el    For all matching instances  use document querySelectorAll    or for those within another element you can chain as follows     Get some wrapper  with class  quot parentClassName quot  let parentEl   document querySelector   parentClassName       Get all img tags within the parent element by parentEl variable let childrenEls   parentEl querySelectorAll  img     Note the above is equivalent to  let childrenEls   document querySelector   parentClassName   querySelectorAll  img

User · Answer

No  Every jQuery function returns a jQuery object  and that is how it works  This is a crucial part of jQuery s magic   If you want to access the underlying element  you have three options      Do not use jQuery  Use  0  to reference it Extend jQuery to do what you want       fn child   function s        return   this  children s  0

User · Answer

Maybe in this way       img   this  0

[javascript] How to select a single child element using jQuery?

Examples related to javascript

Examples related to jquery

Examples related to dom-traversal