jQUERY > naviguer dans l’arborescence et sélectionner un élément

Voici comment sélectionner des éléments du DOM suivant sa descendance, sa place ou sa qualité.

 

Notions de descendance

Les enfants de …

Le plus proche de …

 

Notions de descendance

Un enfant est une balise encadrée par une balise parent :

 

<ul>

   <li></li>

</ul>

 

ou

 

<p>

   <a></a>

</p>

 

 

$(‘a’).parent(‘.texte’); ensemble des blocs parents ayant la classe .texte

children() enfant direct de l’élément sélectionné. équivaut au sélecteur >

find() tous les enfants d’un élément

 

Un frère d’un élément est une balise ayant le même parent




<ul>

  <li></li>

  <li></li>

</ul>




Les descendances

 

 

LES ENFANTS DE … : .children()

Les enfants de chaque élément renseigné.

 

 

 

LE PLUS PROCHE DE … : .closest()

the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

 

 

 

LES DESCENDANTS : .find()

Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

 

 

 

LE SUIVANT : .next()

L’élément frère suivant directement l’objet ciblé.

 

 

 

LES SUIVANTS : .nextAll()

Tous les éléments frères suivant l’objet ciblé.

 

 

 

LES SUIVANTS SAUF : .nextUntil()

Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.

 

 

 

PARENT LE PLUS PROCHE : .offsetParent()

Get the closest ancestor element that is positioned.

 

 

 

LE PARENT DE … : .parent()

 

Premier bloc parent de l’élément ciblé.

 

exemple: $("a").parent();

<ul>

   <li>

      <p>

         <a></a>

      </p>

   </li>

</ul>

 

 

 

LES PARENTS DE … : .parents()

Tous les parents d’un élément (ancêtres).

 

exemple: $("a").parents();

<ul>

   <li>

      <p>

         <a></a>

      </p>

   </li>

</ul>

 

 

 

LES PARENTS SAUF : .parentsUntil()

Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector, DOM node, or jQuery object.

 

 

 

PRÉCÉDENT : .prev()

L’élément frère précédant directement l’objet ciblé.

 

 

 

LES PRÉCÉDENTS : .prevAll()

Tous les éléments frères précédant l’objet ciblé.

 

 

 

LES PRÉCÉDENTS SAUF : .prevUntil()

Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.

 

 

 

ENFANTS DE MEME PARENT : .siblings()

Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

 

 

 

Les filtres

Filtrer et boucler les éléments

les filtres et les conditions permettent de cibler des éléments de manière plus précise et concise que les méthodes apparentées à la descendance. En effet, jusqu’ici, vous ne savez que sélectionner les éléments enfants, parents, ancêtres ou frères d’un objet. En revanche, le ciblage par l’index, par exemple, vous est totalement inconnu. Afin de combler ces lacunes, nous vous invitons à lire la suite.

Filtrer les éléments

Filtre par sélecteur
La méthode principale permettant de filtrer des éléments se nomme filter(). Elle va permettre de supprimer tous les objets ne correspondant pas à la recherche de la sélection, ce qui est très pratique dans le cas où vous souhaitez ne récupérer que certains éléments et pas d’autres, dans une recherche plus globale. La requête est à spécifier en tant qu’argument, et peut être vraiment très précise dans le cas où il est possible de donner plusieurs sélecteurs d’un seul coup en les séparant de virgules !

$(‘p’).filter(‘.texte’); // supprime de la sélection tous les paragraphes n’ayant pas la classe .texte
$(‘p’).filter(‘.texte, #description’);
// supprime de la sélection tous les paragraphes n’ayant pas la classe .texte ou l’identifiant #description

La méthode not() permet de faire la même chose, mais prend en argument les objets à ne pas prendre en compte.

Filtre par index
Vous avez déjà rencontré le sélecteur :eq() plus tôt dans le cours. Il suffisait de l’utiliser avec un index pour sélectionner un élément grâce à celui-ci. Il existe également la méthode eq() qui elle s’exécute sur un objet. Elle va donc parcourir le tableau d’occurrences trouvées et sélectionner seulement celui qui possède l’index indiqué en argument.

$(‘p’).eq(2); // cible le troisième paragraphe trouvé (l’index commence à 0)

Petite astuce, vous pouvez spécifier un nombre négatif : jQuery commencera alors à compter à partir du dernier index. Si vous possédez quatre paragraphes et que vous donnez la valeur -1 à la méthode, alors votre objet sera le quatrième paragraphe.
Moins utilisée, la méthode slice() permet de prendre une portion d’un tableau d’objets, grâce à leur index. Elle prend un argument obligatoire, et un second facultatif :

start, qui est la position (ou l’index) du premier élément à filtrer ; 

end, qui est la position (ou l’index) du dernier élément à filtrer, non pris en compte par la sélection.

Il s’agit donc littéralement de couper un tableau contenant l’ensemble de nos éléments ciblés. Seuls ceux étant compris entre les index spécifiés seront gardés, les autres étant alors supprimés de la sélection :

$(‘div’).slice(1, 3); // garde seulement les blocs div ayant l’index 1 ou 2

Vérifier le type d’un élément
La fonction is() est peu utilisée, mais il est bon de la connaître dans le cas où vous rencontrez un code qui la contient pour une quelconque raison. Elle renvoie simplement un booléen, true si elle déduit que l’argument donné correspond au type de l’élément analysé, false si ce n’est pas le cas :

var vrai = $(‘div’).is(‘div’);
var faux = $(‘div’).is(‘p’);
console.log(vrai); // affiche true
console.log(faux); // affiche false

Boucler les éléments

Non content de sa puissance, jQuery révolutionne le concept des boucles en permettant une nouvelle forme : le bouclage d’éléments. Assez particulier, ce système est toutefois bien utile : il va traiter chaque occurrence trouvée et exécuter une fonction définie dessus. Il s’agit de la méthode each(). Elle va agir sur chaque objet trouvé, en effectuant littéralement une boucle. Cela va vous permettre par exemple d’exécuter des fonctions qui, normalement, s’arrête au premier élément rencontré, les autres étant laissé à l’abandon.

$(‘p’).each( function(){
alert( $(this).text() ); // $(this) représente l’objet courant
} );

Il est possible de récupérer l’index de l’élément courant grâce à un argument, à placer dans la fonction de retour.
Si la fonction retourne false, alors la boucle s’arrête brutalement. Si au contraire elle retourne true, alors la boucle passe directement à l’élément suivant. Il existe d’autres utilisations de cette méthodes, notamment avec sa sœur $.each(), mais nous ne les aborderons pas ici car elles ne sont pas vraiment courantes et utilisées.
Maintenant que vous savez parcourir le DOM, que vous maîtrisez les notions de descendance, de fraternité et de filtrage d’éléments, vous pouvez enfin passer à la manipulation du code HTML lui-même. Le prochain chapitre regroupe beaucoup de fonctions à connaître et à savoir utiliser. C’est aussi le dernier chapitre avant le prochain TP, donc préparez vous à bien l’assimiler !

 

 

 

 

#id Sélectionne un élément en fonction de son attribut id.
* Sélectionne tous les éléments (inclut les éléments head, body, etc).
.class selectionne les éléments selon leur classe.
.class.class Recherche tous les éléments qui possèdent les classes spécifiées.
:animated Selectionne les éléments qui sont actuellement animés
:button Sélectionne tous les éléments INPUT de type button.
:checkbox Sélectionne tous les éléments INPUT de type checkbox.
:checked Sélectionne tous les éléments qui sont cochés.
:contains(texte) Recherche les éléments qui contiennent le texte spécifié
:disabled Sélectionne les éléments qui sont désactivés.
:empty Retourne les éléments qui n’ont pas d’éléments enfants (en incluant les noeuds textes).
:enabled Sélectionne tous les éléments qui sont activés
:eq(index) Sélectionne un élément par son index.
:even Selectionne les éléments pairs (index à partir de 0).
:file Sélectionne tous les éléments INPUT de type file.
:first Sélectionne le premier élément de la sélection.
:first-child Sélectionne les premiers fils des éléments répondant à la recherche.
:gt(index) Recherche tous les éléments qui ont in index supérieur a celui entré. A noter que le premier élément a pour valeur 0 dans l’index.
:has(selector) Retourne les éléments dont au moins un de leur élément fils répond au selecteur "selector".
:header Retourne tous les éléments qui sont de type entête les h1,h2, h3, …
:hidden Sélectionne les éléments qui sont cachés.
:image Sélectionne tous les élément INPUT de type image.
:input Sélectione tous les éléments de type INPUT, TEXTAREA, SELECT et BUTTON.
:last ( )Retourne le dernier élément de la sélection.
:last-child Sélectionne les derniers fils des éléments répondant a la recherche.
:lt(index) Retourne les éléments ayant un index inférieur a celui entré. A noter que le premier élément dispose de l’index 0.
:not(selector) Filtre tous les éléments qui répondent à la sélection.
:nth-child(index/even/odd/equation) Recherche tous les éléments qui sont le nieme fils ou un fils pair ou impair de leur parent.
:odd Sélectionn les éléments impairs (index à partir de 0).
:only-child Sélectionne les éléments qui sont le seul fils des éléments répondant à la sélection.
:parent Recherche les éléments qui ont des éléments fils, en incluant les noeuds texte.
:password Sélectionne tous les éléments INPUT de type password.
:radio Sélectionne tous les éléments INPUT de type radio.
:reset Sélectionne tous les éléments INPUT de type reset.
:selected Sélectionne tous les éléments qui sont sélectionnés.
:submit Sélectionne tous les éléments INPUT de type submit.
:text Selectionne tous les éléments INPUT de type text.
:visible Recherche tous les éléments qui sont visibles.
Ancetre descendant Recherche tous les descendants désignés par le selecteur "descendant" de l’élément parent désigné par le selecteur "ancetre".
Element Sélectionne les éléments en fonction de leur nom.
Parent > enfant Recherche tous les éléments définis par le sélecteur "enfant", fils direct de l’élément parent spécifié par le sélecteur "parent".
Prev ~ siblings Cible les éléments frères situés après l’élément ciblé par le sélecteur "prev" (a noter que "prev" cible uniquement un seul élément, a la différence de l’opérateur "+"), et qui répondent au sélecteur "siblings".
Prev+next Recherche tous les éléments répondant au sélecteur "next", et qui se trouvent apres les éléments identifiés par le sélecteur "prev".
Selecteur1, selecteur2, selecteurN Retourne le résultat de tous les sélecteurs combinés. Le nombre de sélecteurs n’est pas limité.
[attribute!=value] Recherche les éléments dont l’attribut spécifié n’est pas égal à la valeur, et les éléments pour lequel l’attribut n’est pas spécifié.
[attribute$=value] Recherche les éléments dont l’attribut spécifié n’est pas nulle, et pour lequel la valeur se termine par la valeur spécifiée.
[attribute*=value] Recherche les éléments dont la valeur de l’attribut spécifié contient entre autre la valeur spécifiée.
[attribute=value] Recherche les éléments pour lesquels l’attribut spécifié vaut la valeur définie.
[attribute^=value] Recherche les éléments qui ont l’attribut spécifié et dont la valeur commence par la valeur spécifiée.
[attribut] Recherche les éléments pour lequel l’attribut spécifié est renseigné. A noter que le @ avant le nom de l’attribut est déprécié depuis jQuery 1.2.
[FiltreAttribut1][FiltreAttribut2][FiltreAttributN] Recherche les éléments répondant a chacun des filtres renseignés. Ces filtres se combinent.

 

 

Caractères spéciaux dans les sélecteurs

Si vous souhaitez utiliser les métas caractères décris plus haut de manière litérale, vous devez échapper le caractère avec deux back-slashes (\\). Par exemple :

#foo\\:bar #foo\\[bar\\] #foo\\.bar

 

 

 

Quelques exemples

Cache tous les élements fils d’un paragraphe contenant des liens:
$("p[a]").hide();

 

Affiche le premier paragraphe de la page:
$("p:eq(0)").show();

 

Cache tous les div qui sont affichés:
$("div:visible").hide();

 

Permet d’obtenir la liste des items d’une liste non ordonnée:
$("ul/li");
ou
$("ul>li");

 

Récupère tous les paragraphes de la classe "test", et contenant au moins un lien:
$("p.test[a]");

 

Récupère tous les élements de liste contenant le texte "test":
$("li[a:contains('test')]");

 

Retourne les valeurs des champs input ayant pour nom "Valider":

$("input[@name=Valider]").val();

 

Retourne la liste des cases a cocher qui sont cochées:

$("input[@type=radio][@checked]")

Sélecteurs CSS

jQuery supporte les selecteurs utilisant les normes allant de CSS1 à CSS3.

Liste des selecteurs supportés

Pour plus d’informations sur les sélecteurs énoncés ci-dessous, rendez-vous sur la documentation officielle concernant les selecteurs CSS.

*: n’importe quel élément
E: élément de type E
E:nth-child(n): élément E, le n-ième fils de son père
E:first-child: élément E, le premier fils de son père
E:last-child: élément E, le dernier fils de son père
E:only-child: élément E, seul fils de son père
E:empty: élément E qui n’a pas de fils (en incluant les noeuds textes)
E:enabled: élément de type interface (élement de formulaire) E qui n’est pas désactivé
E:disabled: élément de type interface E qui est désactivé
E:checked: élément de type interface E qui est coché (case a cocher, bouton radio…)
E:selected: élément de type interface E qui est sélectionné (options d’un select).Ce selecteur n’est pas dans la spécification CSS, mais est supporté par jQuery.
E.warning: élement E dont la classe est "warning"
E#myID: élement E dont l’id est "myID". ne retourne qu’un élement maximum.
E:not(s): élement E qui ne repond pas a la condition du selecteur s. Exemple: E:not(enabled) = E:disabled
E F: élement F descendant d’un élement E.
E > F: élement F fils d’un élement E.
E + F: élement F immédiatemment précédé d’un élement E.
E ~ F: élement F précédé d’un élement E.
E,F,G: sélectionne tous les élements E, F et G.

Autres sélecteurs supportés

Les selecteurs d’attributs ont été écrits suivant les règles de XPath (du fait que tous les attributs devraient débuter par le symbole @).

E[foo]: élément E avec un attribut "foo".
E[foo=bar]: élément E avec un attribut "foo" valant "bar".
E[foo^=bar]: élément E avec un attribut "foo" dont la valeur débute par la chaine "bar".
E[foo$=bar]: élément E avec un attribut "foo" dont la valeur se termine par la chaine "bar".
E[foo*=bar]: élément E avec un attribut "foo" dont la valeur contient la chaine "bar".

Slecteurs non supportés

jQuery ne supporte que les slecteurs qui Sélectionne des elements dom, les autres sont ignorés:

E:link
E:visited
E:active
E:hover
E:focus
E:target
E::first-line
E::first-letter
E::selection
E::before
E::after

jQuery ne supporte pas non plus les sélecteurs suivants en raison de leur utilité très limitée:

E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:first-of-type
E:last-of-type
E:only-of-type
E:lang(fr)
E[foo~="test"]
E[hreflang|="en"]

Sélecteurs XPath

Les chemins

Les chemins absolus:

$("/html/body//p") $("/*/body//p") $("//p/../div")

 

Les chemins relatifs:

$("a",this) $("p/a",this)

Les selecteurs d’"axes"

Descendant: Element qui a un élement descendant.
Recherche les élements p contenus dans un div:

$("//div//p")

Fils: Element qui a un element fils .
Recherche les élements p fils de div:

$("//div/p")

Elements frères: Element qui a un element frère (sur le même axe).
Recherche les formulaires qui précèdent un div:

$("//div ~ form")

Parent: Sélection du parent d’un élement.
Recherche les élements p contenus dans un div:

$("//div/../p")

Les prédicats

Les prédicats supportés

[@foo]: Element qui a un attribut foo.

$("//input[@checked]")

[@foo='test']: Element qui a un attribut foo qui est égal à ‘test’.

$("//a[@ref='nofollow']")

[Nodelist]: Element qui contient une liste de noeuds.

$("//div[p]")//liste des paragraphes contenus dans un div $("//div[p/a]") //liste des lien contenus dans les paragrpaghe d’un div

Les prédicats supportés, mais avec une syntaxe différente

[last()] or [position()=last()] devient :last

$("p:last")

[0] or [position()=0] devient :eq(0) ou :first

$("p:first") $("p:eq(0)")

[position() < 5] devient :lt(5)

$("p:lt(5)")

[position() > 2] devient :gt(2)

$("p:gt(2)")

Sélecteurs spécifiques a jQuery

Certaines expressions ne sont pas incluses dans Xpath ou CSS, mais elles s’avèrent être bien utiles dans le cas de traitement de documents HTML. En voici la liste:

Sélecteurs généraux

:even: Sélectionne les élement de la sélection dont l’index est pair.
:odd: Sélectionne les élement de la sélection dont l’index est impair.
:eq(0) and :nth(0): Sélectionne le n-ième élément de la selection.
:gt(N): Sélectionne les élements dont l’index est supérieur à 4.
:lt(N): Sélectionne les élements dont l’index est inférieur à 4.
:first: Equivalent de :eq(0)
:last: Sélectionne les dernier élement de la sélection.
:parent: Sélectionne les élements de la selection qui ont des enfants (noeuds texte inclus).
:contains(‘test’): Sélectionne les élements de la sélection qui contiennent le texte spécifié.
:visible: Sélection tous les élements de la sélection visibles (élements qui ont la propriété display:block ou display:inline, visibility:visible, et ne sont pas des élements de formulaire de type input hidden)
:hidden: Sélection tous les élements de la sélection cachés (élements qui ont la propriété display:none, ou visibility:hidden, ou sont des élements de formulaire de type input:hidden)

Quelques exemples:

$("p:first").css("fontWeight","bold"); //met en gras le premier paragraphe $("div:hidden").show(); //montre tous les div cachés $("div:contains(‘test’)").hide(); //cache les div contenant ‘test’

Sélecteurs pour les formulaires

:input: Sélectionne tous les élements de formulaire (input, select, textarea, button).
:text: Sélectionne tous les champs texte (type="text").
:password: Sélectionne tous les champs mot de passe (type="password").
:radio: Sélectionne tous les champs de type boutons radio (type="radio").
:checkbox: Sélectionne tous les champs de type case a cocher (type="checkbox").
:submit: Sélectionne tous les boutons d’envoi (type="submit").
:image: Sélectionne tous les champs de type image (type="image")
:reset: Sélectionne tous les boutons de réinitialisation (type="reset").
:button: Sélectionne tous les autres boutons(type="button").
:file: Sélectionne les champs input de type file (type="file").

Voir aussi :hidden, décrit dans la section précédente.
Il est recommandé de définir une sélection limitée pour l’utilisation de ces sélecteurs :

Exemple:
va sélectionner tous les champ de type input du formulaire myForm.

$(‘#myForm :input’)

Exemple:
va sélectionner tous les champs de type radio du formulaire myForm (syntaxe a utiliser si vous disposez déja d’une référence au formulaire).
A noter que ce sélecteur est sensiblement le même que [@input=radio], mais sera un petit plus rapide que ce dernier.

ou,

$(‘input:radio’, myForm)