jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site > Trucs et astuces > Ajouter une boîte à coucou

Ajouter une boîte à coucou

jeudi 17 août 2006, par Fil

L’idée est d’ajouter dans la page, à un endroit bien choisi, une <div/>.


Tout d’abord, choisir l’endroit qui convient : disons, par exemple, au début du deuxième paragraphe du texte de la page.

Nous repérons le texte comme étant la <div id="texte" />, avec $("#texte").

Ensuite, pour repérer le deuxième paragraphe, on utilise l’expression jQuery correspondante :

$("#texte/p:nth-child(2)")

#texte va sélectionner l’élement (ici, une <div/>) dont l’id est texte ; ensuite, avec #texte/p on considère les paragraphes appartenant immédiatement à cette <div/>. Et la règle :nth-child(1) demande que, parmi ces paragraphes, seul celui qui se trouve en position 1 (la deuxième, donc, après la position 0) sera sélectionné.

On ajoute ensuite au début de ce paragraphe notre boîte à coucou :

$("#texte/p:nth-child(2)").prepend("<div>Coucou !</div>");

Et voilà !

P.-S.

Attention, jusqu’à la version 1.0.4 de Jquery, le paramètre nth-child() était incorrect et commençait à 0. Il faut donc faire $("#texte/p:nth-child(1)"). Ou mettre à jour votre librairie…

Documents joints

Répondre à cet article


Derniers commentaires

Nouveautés sur le Web