Il peut arriver que l'on ait besoin de sélectionner un élément dont l'ID ou la classe commence ou finit par un nom défini, pour pouvoir le modifier ou le manipuler.

Évidemment, si il possède un ID ou une classe bien défini, on utilisera son ID ou sa classe. Par contre, si aucune classe n'est définie par exemple, il faudra utiliser une expression régulière (regex).

On peut faire cela très simplement avec jQuery.

Sélectionner tous les éléments dont l'ID commence par toto_

Prenons un petit exemple, nous allons chercher à sélectionner tous les élements dont l'ID commence par toto_:

jQuery('[id^=toto_')

Le signe ^ signifie que l'on se place en début de chaîne dans l'expression régulière. Ensuite, il suffit d'indiquer la chaîne à chercher, c'est-à-dire toto_ dans notre cas.

S'il s'agit d'un champs de formulaire <input>, on trouvera donc:

&lt;input id="toto_01" type="number" />
&lt;input id="toto_02" type="number" />
&lt;input id="toto_03" type="number" />

Sélectionner tous les éléments dont l'ID finit par _toto

Cherchons maintenant à sélectionner tous les éléments dont l'ID finit par _toto:

jQuery('[id$=_toto')

Cette fois, on utilise l'argument $, qui signifie la fin d'une chaîne de caractères.

Exemple concret : remplacer le type de tous les champs de formulaire dont l'ID finit par -money

J'ai récemment eu à modifier le comportement d'une page de réglages d'un plugin pour WooCommerce.

A lire :  Nouveautés du site : printemps-été 2011

En substance, les champs étaient de type number, ce qui est problématique car ils ne permettent que des nombres entiers. Or, s'agissant d'un système de conversion de devises, il était primordial d'avoir accès à des nombres flottants, avec des virgules.

La solution est de cibler tous les champs finissant par -moneyet d'en changer le type de number à text, ce qui se fait très facilement avec la requête suivante:

jQuery('[id$=-money]').attr('type', 'text');

Et si l'on veut cibler les classes?

Dans les exemples précédents, il suffit de remplacer le mot idpar le mot class.

Vous avez un projet WordPress ou WooCommerce, souhaitez ajouter de nouvelles fonctionnalités ou cherchez à améliorer les performances de votre site ?

Parlons de votre projet »

Si vous avez trouvé une faute d’orthographe, informez-nous en sélectionnant le texte en question et en appuyant sur Ctrl + Entrée s’il vous plaît.

Articles en rapport:

jQuery : sélectionner un élément dont l'ID ou la classe commence ou finit par une chaîne

par Matt Lecture: 2 min
0

Pin It on Pinterest

Spelling error report

The following text will be sent to our editors: