Maison > Article > interface Web > Jquery : compréhension approfondie du sélecteur de premier enfant

Jquery : compréhension approfondie du sélecteur de premier enfant

黄舟original: 2017-06-23 14:28:301517parcourir

Aperçu

correspond au premier élément enfant

':first' ne correspond qu'à un seul élément, tandis que ce sélecteur correspondra à un enfant pour chaque élément parent Élément

Exemple

Description :

Trouver le premier li

Code HTML :

<ul> 
<li>John</li> 
<li>Karl</li> 
<li>Brandon</li> 
</ul> 
<ul> 
<li>Glen</li> 
<li>Tane</li> 
<li>Ralph</li> 
</ul>

jQuery Code :

$("ul li:first-child")

Résultat :

[ <li>John</li>, <li>Glen</li> ]

$("p:first-child") définition :

Sélectionnez le premier élément p appartenant à son élément parent et tous les éléments frères :

Exemple de code

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8">
        <title>first-child选择器</title>
        <script src="../../jquery.min.js">
        </script>

        <script>
            $(document).ready(function(){
                $("p:first-child").css("background-color","red");
            });        </script>
    </head>

    <body>
        <p>the first paragraph in body</p>

        <div style="border:1px solid;">
            <p>The first paragraph in div.</p>
            <p>the last paragraph in div.</p>
        </div><br>

        <div style="border:1px solid;">
            <span>This is a span element.</span>
            <p>The first paragraph in another div.</p>
            <p>The last paragraph in another div.</p>
        </div>
    </body></html>

Structure arborescente DOM

Jquery : compréhension approfondie du sélecteur de premier enfant

Explication populaire

Localisez d'abord l'élément parent de tous les éléments p dans le document actuel, puis localisez son premier élément enfant, puis modifiez l'effet d'ombre arrière, $("p:last -child") est exactement le contraire. Si le premier élément ne l'est pas. p, mais un élément span, l'effet d'ombre arrière ne sera pas modifié.

Extended

$("p:nth-child(n)")
Sélectionne chaque élément p qui est le nième élément enfant de son élément parent.
Si le n-ème élément n'est pas un p élément, il n'appartient pas à la plage sélectionnée par ce sélecteur.

$(“p:nth-last-child(n)”)
Sélectionnez l'élément p qui est le troisième élément enfant de son élément parent, en comptant à partir du dernier élément enfant
Si vous comptez down Si le nième élément n'est pas un élément p, il n'appartient pas à la plage sélectionnée par ce sélecteur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Que signifie nth-child(3n) dans jquery ?Article suivant：Que signifie nth-child(3n) dans jquery ?

Articles Liés

Voir plus