La magie du contexte dans jQuery

Question : après avoir utilisé un sélecteur jQuery qui nous retourne l'élément du DOM HTML, comment peut-on effectuer une sélection supplémentaire sur la portion du code HTML référencée par le sélecteur ?

Pour y répondre, la meilleure façon est d'avoir un exemple de code. En commençant par un div comme conteneur où se trouvent un lien et un paragraphe :

<div id="mainDiv">
   <a href="http://code18.blogspot.com">Code 18</a>
   <p>Lorem ipsum... cette portion <span>n'est pas en gras</span></p>
</div>

En sélectionnant le div principal par son ID, on peut assigner ce qui est retourné à une variable qui contient le code HTML du div ainsi que son contenu. Toujours en utilisant un sélecteur comme premier paramètre, on indiquera la variable du résultat précédent comme contexte, c'est-à-dire comme deuxième argument (optionnel) : $j(sélecteur, contexte).

On pourra alors aller chercher la balise <a> qui se trouve à l'intérieur du <div> et changer l'URL et le texte du lien par programmation.

Enfin, on ira extraire la balise <p> et on cherchera ensuite par un autre sélecteur le <span> qui se trouve imbriqué dans le paragraphe pour y appliquer le style gras (et du même coup changer le sens de la phrase).

$j = jQuery.noConflict();

$j(document).ready(function(){
   if( confirm('Voulez-vous effectuer le changement ?') ){
       var div = $j('#mainDiv');
       $j('a', div).attr('href', 'http://www.google.com').html('Google');

       var p = $j('p', div);
       $j('span', p).attr('style', 'font-weight:bold').html('est en gras');
   }
});

Dans cet exemple, le popup de confirmation est là que pour vous laisser le temps de voir s'appliquer les changements avant/après.