How to select a single child element using jQuery?
Andrew Mclaughlin 
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 elementOr have I missed something?
6 Answers
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.
1No. 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]; }
Maybe in this way?
$('img', this)[0]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...
}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
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');<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 runat="server" Text="<%#MoreInfo%>" > --> <!-- </asp:LinkButton> -->
<!-- </asp:LinkButton> -->
<br />
<asp:Repeater runat="server" DataSourceID="SqlDataSource1">
<div>
<a><span runat="server"> MoreInformation</span></a>
<div> <!-- 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 runat="server"> MoreInformation</span></a>
<div> <!-- 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 runat="server"> MoreInformation</span></a>
<div> <!-- 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 runat="server"> MoreInformation</span></a>
<div> <!-- 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>
