web-dev-qa-db-fra.com

Comment sélectionner un seul élément enfant à l'aide de jQuery?

Avec jQuery, comment sélectionner un seul élément enfant? J'ai examiné l'API Traversing et je sais que je peux sélectionner tous les éléments enfants img comme ceci:

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

Et pour sélectionner le premier élément img de l'enfant, je pourrais utiliser un indice comme celui-ci:

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

Mais je suppose que je suis un peu surpris de ne pas pouvoir faire ça:

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

Ou ai-je raté quelque chose?

javascriptjquerydom-traversal
54
Jonathon Watney

Non. Chaque fonction jQuery renvoie un objet jQuery, et c'est comme cela que ça fonctionne. C'est une partie cruciale de la magie de jQuery.

Si vous souhaitez accéder à l'élément sous-jacent, vous avez trois options ...

  1. Ne pas utiliser jQuery 
  2. Utilisez [0] pour le référencer

  3. Étendez jQuery pour faire ce que vous voulez ...

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

Je pense que ce que vous voulez faire est la suivante:

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

cela vous donnera un objet jQuery contenant le premier élément img, alors que 

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

vous donnera l'élément img lui-même.

86
Greg

Peut-être de cette façon? 

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

Non pas jQuery, comme le demande la question, mais en mode natif (c'est-à-dire, aucune bibliothèque requise), je pense que le meilleur outil pour le travail est querySelector pour obtenir une seule instance d'un sélecteur:

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

Utilisez document.querySelectorAll() pour toutes les instances correspondantes, ou pour celles d'un autre élément, vous pouvez chaîner comme suit:

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

Notez que ce qui précède est équivalent à:

let childrenEls = document.querySelector('.parentClassName').querySelectorAll('img');
0
Nick Bull