Cómo seleccionar un solo elemento secundario usando jQuery?

StackOverflow https://stackoverflow.com/questions/1474089

Pregunta

El uso de jQuery ¿Cómo se selecciona un único elemento hijo? He mirado en la API de desplazamiento y sé que puedo seleccionar todos los elementos de los hijos inmediatos img como esta: 

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

Y para seleccionar el primer elemento img niño que podría utilizar un subíndice como esto: 

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

Pero supongo que estoy un poco sorprendido de que yo no puedo hacer esto: 

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

O me he perdido algo?

¿Fue útil?

Solución

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 utilice jQuery
  2. Uso [0] hacer referencia a ella

  3. Extender jQuery para hacer lo que quiera ... 

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

Otros consejos

Creo que lo que quiere hacer es lo siguiente: 

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

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

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

le dará el elemento img sí mismo.

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>

No jQuery, ya que la pregunta se refiere, pero de forma nativa (es decir, no hay bibliotecas necesarias) Creo que la mejor herramienta para el trabajo es querySelector para obtener una sola instancia de un selector: 

let el = document.querySelector('img');
console.log(el);

En todos los casos a juego, uso document.querySelectorAll(), o para aquellos dentro de otro elemento que pueda cadena como sigue: 

// Get some wrapper, with class="parentClassName"
let parentEl = document.querySelector('.parentClassName');
// Get all img tags within the parent element
let childrenEls = parent.querySelectorAll('img');

Tenga en cuenta lo anterior es equivalente a: 

let childrenEls = document.querySelector('.parentClassName').querySelectorAll('img');
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top