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 :  Android : personnaliser les sonneries et sons des notifications de votre smartphone

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.

Pour développer votre projet WordPress ou Woocommerce, faites appel à mon expertise pour réaliser un site rapide, performant et fonctionnel.

Je soumets mon 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

Share This

Spelling error report

The following text will be sent to our editors: