La différence entre les sélecteurs nth-child(N) et eq(N) dans JQuery

1. nth-child(N) : L'indice commence à 1 ; eq(N) : L'indice commence à partir de 0

2 nth-child(N) : Sélectionnez plusieurs éléments ; ) : Sélectionnez un élément

3. nth-child(N) : Dans un arbre de documents, sélectionnez tous les éléments classés Nième dans chaque couche.
Exemple : nième-enfant(2) : comprend le deuxième enfant du père, le deuxième enfant du frère et le deuxième enfant du descendant. La partie verte dans l'image ci-dessous

eq( N) : Dans une arborescence de documents, après tri en pré-ordre, sélectionnez le Nième élément et tous ses sous-éléments.

Exemple : Dans le code HTML suivant, affichez les résultats de $("div:eq(3)").html(). (Le nombre est le nombre de la séquence précédente)

<div>0  
    <div>1  
        <div>div_a_2</div>  
        <div>3  
            <div>div_b_4</div>  
            <div>div_c_5</div>  
        </div>  
        <div>div_d_6</div>  
    </div>  
    <div>7  
        <div>div_e_8</div>  
    </div>  
    <div>9  
        <div>10  
            <div>div_f_11</div>  
        </div>  
        <div>div_g_12</div>  
    </div>  
</div>

$("div:eq(3)").html() résultat de la sélection

Enfin, réfléchissez à une question :

$('div:nth-child(odd)').css("color","red");  
$('div:nth-child(even)').css("color","blue");

En utilisant les deux phrases ci-dessus, la couleur de la police de tous les div apparaîtra-t-elle dans des intervalles rouges et bleus ? La réponse est bien sûr : non

Le test est le suivant, la partie code :

  
  
  
  
      
  
  
<div>0  
    <div>1  
        <div>div_a_2</div>  
        <div>3  
            <div>div_b_4</div>  
            <div>div_c_5</div>  
        </div>  
        <div>div_d_6</div>  
    </div>  
    <div>7  
        <div>div_e_8</div>  
    </div>  
    <div>9  
        <div>10  
            <div>div_f_11</div>  
        </div>  
        <div>div_g_12</div>  
    </div>  
</div>  
  

Résultats en cours d'exécution :

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!