Je suis en train de m’initier au jQuery via les tutoriels du Site du Zéro et dans les deux que j’ai consulté, j’ai eu du mal à comprendre quelle était la différence entre:
$('p .lien');
et
$('p >.lien');
Je ne dis pas que cela était mal expliqué mais dans l’un, c’était une explication sans vrai exemple et avec des mots qui représentaient, à mon sens, mal la situation et dans l’autre, c’était un exemple mais où il indiquait uniquement ce qui serait pris et de plus, cela me semblait brouillon niveau présentation.
Donc, quelle est la différence?
Voici un exemple: CSS dans la balise head:
<style type="text/css">
#premier_texte { color: blue; font-size: larger; }
.texte { font-weight: bolder; }
.texte2 { color: red; }
</style>
Contenu de la balise body
<p id="premier_texte">
<span class="texte">
Salut tout le monde
</span>
</p>
<p>
<span class="texte2">
C'est un <b class="texte">Zombie</b><br/>
</span>
<span class="texte"> <b class="texte2">Loup-Garou </b>Je suis</span>
<a href="#" class="texte">Here</a>
</p>
<p>
<span class="texte2">
Exemple
</span>
</p>
Que se passe-t-il avec « p .lien »?
« p .lien » permet de sélectionner tous les éléments (ou balises) qui ont pour classe .lien et qui sont contenus dans des balises p, peu importe son emplacement.
jQuery
<!-- jQuery inclusion -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$('p .texte').html('yo');
</script>
Toutes les balises qui avaient pour classe .texte et contenues dans une balise p (qu’elles soient contenues dans une autre balises à l’intérieur de p ou pas) ont donc été concernées par le changement de texte.
Et p > .lien?
« p> .lien » permet de sélectionner tous les éléments (ou balises) qui ont pour classe .lien contenues uniquement dans une balise p – s’il y a une balise entre p et l’élément .lien, ce dernier ne sera pas pris en compte.
jQuery
<!-- jQuery inclusion -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$('p > .texte').html('yo');
</script>
Seules les balises ayant pour classe .texte qui n’étaient pas contenues dans une autre balise autre que p ont été affectées par le script: en termes plus parlants, la balise b qui était contenue dans un span dans le deuxième p et qui a pour classe .texte ne sera pas affectée par le script car span se met entre p et b dans ce cas-ci et agit comme une protection contre le changement.
