如何使用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魔法的重要组成部分。
如果你想访问底层元素，你有三个选项…
- 不要使用jQuery
- 用
[0]来引用它 -
扩展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>
