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?

Greg · Accepted Answer · 2009-09-24 20:57:02Z

136

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.

answered Sep 24, 2009 at 20:57

Greg

10.2k5 gold badges44 silver badges46 bronze badges

2

Note that using find as in the first answer will give you all descendant elements, whereas child will give you only direct children.
– Greg
Commented Sep 24, 2009 at 20:59
From jquery.com: .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.
– Movahhedi
Commented Nov 16, 2022 at 7:32

Add a comment |

Kevin Ji · Accepted Answer · 2013-08-06 18:08:24Z

53

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];
}

edited Aug 6, 2013 at 18:08

Kevin Ji

10.5k4 gold badges42 silver badges65 bronze badges

answered Sep 24, 2009 at 21:02

Josh Stodola

82.2k48 gold badges183 silver badges228 bronze badges

Ah ha! That was it. I was expecting the img element (trying to reference its 'src' property) instead of the jQuery object. Now I'll just use 'attr()' to get at the 'src' property.
– Jonathon Watney
Commented Sep 24, 2009 at 21:11
Thanks for 3) as well. I might consider doing that. :)
– Jonathon Watney
Commented Sep 24, 2009 at 21:12
8

No. If I use for example find("div")[0] I will not get div as a jQuery object. I will get div as HTMLElement. To get div as jQuery object one has to use .eq(0), as Greg said below.
– Green
Commented Jul 30, 2013 at 3:27

Add a comment |

Nakilon · Accepted Answer · 2013-04-04 15:47:46Z

8

Maybe in this way?

$('img', this)[0]

edited Apr 4, 2013 at 15:47

Nakilon

35.4k15 gold badges111 silver badges146 bronze badges

answered Sep 24, 2009 at 20:58

Anatoliy

30k5 gold badges46 silver badges47 bronze badges

1

This will not necessarily select the direct child and, just as the accepted answer, this will return the element, not the jQuery object.
– Septagram
Commented May 6, 2015 at 9:16

Add a comment |

Ahmed Khaber · Accepted Answer · 2020-11-20 23:22:36Z

3

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...
}

answered Nov 20, 2020 at 23:22

Ahmed Khaber

312 bronze badges

Add a comment |

sidoco · Accepted Answer · 2020-09-02 20:44:15Z

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="parentClassName"
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');

Shashank Malviya · Accepted Answer · 2017-08-23 14:53:21Z

<html>
<title>

    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<body>




<!-- <asp:LinkButton ID="MoreInfoButton" runat="server" Text="<%#MoreInfo%>" > -->
 <!-- </asp:LinkButton> -->
<!-- </asp:LinkButton> -->

<br />
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<div>
<a><span id="imgDownArrow_0" class="glyphicon glyphicon-chevron-right " runat="server"> MoreInformation</span></a>
<div id="parent" class="dataContentSectionMessages" style="display:none">
    <!-- repeater1 starts -->
        <!-- <sc:text field="Event Description" runat="server" item="<%#Container.DataItem %>" /> -->
            <ul  >
                <li ><h6><strong>lorem</strong></h6></li>
                <li ><h6><strong>An assigned contact who knows you and your lorem analysis system</strong></h6></li>
                <li ><h6><strong>Internet accessible on-demand information and an easy to use internet shop</strong></h6></li>
                <li ><h6><strong>Extensive and flexible repair capabilities at any location</strong></h6></li>
                <li ><h6><strong>Full Service Contracts</strong></h6></li>
                <li ><h6><strong>Maintenance Contracts</strong></h6></li>
            </ul>
    <!-- repeater1 ends -->
</div>
</div>
<div>
<a><span id="imgDownArrow_0" class="glyphicon glyphicon-chevron-right " runat="server"> MoreInformation</span></a>
<div id="parent" class="dataContentSectionMessages" style="display:none">
    <!-- repeater1 starts -->
        <!-- <sc:text field="Event Description" runat="server" item="<%#Container.DataItem %>" /> -->
            <ul  >
                <li ><h6><strong>lorem</strong></h6></li>
                <li ><h6><strong>An assigned contact who knows you and your lorem analysis system</strong></h6></li>
                <li ><h6><strong>Internet accessible on-demand information and an easy to use internet shop</strong></h6></li>
                <li ><h6><strong>Extensive and flexible repair capabilities at any location</strong></h6></li>
                <li ><h6><strong>Full Service Contracts</strong></h6></li>
                <li ><h6><strong>Maintenance Contracts</strong></h6></li>
            </ul>
    <!-- repeater1 ends -->
</div>
</div>
<div>
<a><span id="imgDownArrow_0" class="glyphicon glyphicon-chevron-right " runat="server"> MoreInformation</span></a>
<div id="parent" class="dataContentSectionMessages" style="display:none">
    <!-- repeater1 starts -->
        <!-- <sc:text field="Event Description" runat="server" item="<%#Container.DataItem %>" /> -->
            <ul  >
                <li ><h6><strong>lorem</strong></h6></li>
                <li ><h6><strong>An assigned contact who knows you and your lorem analysis system</strong></h6></li>
                <li ><h6><strong>Internet accessible on-demand information and an easy to use internet shop</strong></h6></li>
                <li ><h6><strong>Extensive and flexible repair capabilities at any location</strong></h6></li>
                <li ><h6><strong>Full Service Contracts</strong></h6></li>
                <li ><h6><strong>Maintenance Contracts</strong></h6></li>
            </ul>
    <!-- repeater1 ends -->
</div>
</div>
<div>
<a><span id="imgDownArrow_0" class="glyphicon glyphicon-chevron-right " runat="server"> MoreInformation</span></a>
<div id="parent" class="dataContentSectionMessages" style="display:none">
    <!-- repeater1 starts -->
        <!-- <sc:text field="Event Description" runat="server" item="<%#Container.DataItem %>" /> -->
            <ul  >
                <li ><h6><strong>lorem</strong></h6></li>
                <li ><h6><strong>An assigned contact who knows you and your lorem analysis system</strong></h6></li>
                <li ><h6><strong>Internet accessible on-demand information and an easy to use internet shop</strong></h6></li>
                <li ><h6><strong>Extensive and flexible repair capabilities at any location</strong></h6></li>
                <li ><h6><strong>Full Service Contracts</strong></h6></li>
                <li ><h6><strong>Maintenance Contracts</strong></h6></li>
            </ul>
    <!-- repeater1 ends -->
</div>
</div>




</asp:Repeater>


</body>
<!-- Predefined JavaScript -->
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>

<script>

 $(function () {
        $('a').click(function() {
            $(this).parent().children('.dataContentSectionMessages').slideToggle();
        });
    });

    </script>


</html>

$(function () { $('a').click(function() { $(this).parent().children('.dataContentSectionMessages').slideToggle(); }); }); this query will help to get the child item of a parent — Shashank Malviya, Commented Aug 23, 2017 at 14:53

Collectives™ on Stack Overflow

How to select a single child element using jQuery?

6 Answers 6

Not the answer you're looking for? Browse other questions tagged
javascript
jquery
dom-traversal
or ask your own question.

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Not the answer you're looking for? Browse other questions tagged javascriptjquerydom-traversal or ask your own question.

Related

Not the answer you're looking for? Browse other questions tagged
javascript
jquery
dom-traversal
or ask your own question.