varios seleccionar queryselector primer obtener los hijos hijo elementos elemento div dentro buscar javascript jquery dom-traversal

javascript - queryselector - ¿Cómo seleccionar un único elemento hijo usando jQuery?



seleccionar input jquery (4)

Creo que lo que quieres hacer es esto:

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

esto le dará un objeto jquery que contiene el primer elemento img, mientras que

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

le dará el elemento img en sí.

Usando jQuery, ¿cómo selecciono un único elemento secundario? He consultado la API de Traversing y sé que puedo seleccionar todos los elementos inmediatos de img como este:

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

Y para seleccionar el primer elemento hijo img podría usar un subíndice como este:

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

Pero supongo que me sorprende que no pueda hacer esto:

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

¿O me he perdido algo?


No. Cada función jQuery devuelve un objeto jQuery, y así es como funciona. Esta es una parte crucial de la magia de jQuery.

Si desea acceder al elemento subyacente, tiene tres opciones ...

  1. No uses jQuery
  2. Usa [0] para referenciarlo
  3. Extiende jQuery para hacer lo que quieras ...

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


Tal vez de esta manera?

$(''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>