Discussion :

[esperal]

Bonjour,

Je cherche à accéder au 2e enfant d'un div. (Cet enfant n'a pas d'id : il faut partie d'un plugin..)
J'ai essayé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$('#nomdudiv:nth-child(2))...

mais cela ne marche pas. :nth-child() ne s'utilise-t-il qu'avec les sélecteurs de base (p, li...) ?

Merci de votre aide.

[danielhagnoul]

Bonsoir

Si ce code fonctionnait il y aurait un gros bogue dans jQuery !

API : http://api.jquery.com/nth-child-selector/

Exemple :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="nomdudiv">
  <p>
    <b>John</b>
    <b>Karl</b>
    <b>Brandon</b>
  </p>
  <p>
    <b>John</b>
    <b>Karl</b>
    <b>Brandon</b>
  </p>
  <p>
    <b>John</b>
    <b>Karl</b>
    <b>Brandon</b>
  </p>
</div>

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$( function(){ // forme abrégée de $(document).ready(function(){
 
    // Attention, :nth-child() est en base 1 et eq() en base 0.
 
    // le second tag p
    $( "#nomdudiv p:nth-child(2)" ).css( "color", "red" );
 
    // dans le troisième tag p, le deuxième tag b
    $( "#nomdudiv p:eq(2) b:nth-child(2)" ).css( "color", "blue" );
 
    // dans le premier tag p, le premier tag b
    $( "#nomdudiv p:first b:nth-child(1)" ).css( "color", "orange" );
 
    /*
     * Si l'on veut travailler sur le second enfant 
     * de la division quel qu'il soit.
     */
    $( "#nomdudiv" ).children().eq( 1 ).css( "background-color", "yellow" );
 
});

[esperal]

merci