Best IT Recipes

How to select a single child using jQuery?

Using jQuery how to select one child? I looked at the Traversing API and know that I can select all immediate img children like this:

 $(this).children('img');

And to select the first child img , I could use the following index:

 $(this).children('img')[0];

But I'm probably surprised that I can not do this:

 $(this).child('img'); // no subscript, returns single element

Or am I missing something?

+47
javascript jquery dom-traversal
Sep 24 '09 at 20:52
source share
4 answers

No. Each jQuery function returns a jQuery object, and that is how it works. This is a key part of jQuery magic.

If you want to access the base element, you have three options ...

  • Do not use jQuery
  • Use [0] to link to it

  • Extend jQuery to do what you want ...

     $.fn.child = function(s) { return $(this).children(s)[0]; }
+31
Sep 24 '09 at 21:02
source share

I think you want to do 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.

+79
Sep 24 '09 at 20:57
source share

Maybe this way?

 $('img', this)[0]
+3
Sep 24 '09 at 20:58
source share
 <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>
0
Aug 23 '17 at 2:53 on
source share


More articles:


All Articles