如何使用jQueryselect一个子元素?

使用jQuery如何select一个子元素? 我已经看了遍历API,并知道我可以select像这样的所有直接的孩子img元素:

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

而要select第一个孩子的img元素,我可以使用这样的下标:

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

但我想我有点惊讶我不能这样做:

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

还是我错过了什么?

不,每个jQuery函数都返回一个jQuery对象,这就是它的工作原理。 这是jQuery魔法的重要组成部分。

如果你想访问底层元素,你有三个选项…

  1. 不要使用jQuery
  2. [0]来引用它
  3. 扩展jQuery做你想做的事情…

     $.fn.child = function(s) { return $(this).children(s)[0]; } 

我想你想要做的是这样的:

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

这会给你一个包含第一个img元素的jquery对象,而

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

会给你img元素本身。

也许这样呢?

 $('img', this)[0] 
 <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>