web-dev-qa-db-fra.com

Sélectionnez les éléments dont l'attribut id commence / se termine par une valeur particulière

JQuery ou JavaScript peut-il être utilisé avec une expression régulière pour sélectionner plusieurs éléments avec un identifiant similaire?

J'ai les paragraphes suivants:

<p id="item5_2"> A </p>
<p id="item9_5"> B </p>
<p id="item14_2"> C </p>

Je souhaite modifier le contenu des paragraphes dont l'id commence par item et se termine par 2.

J'ai utilisé le jQuery suivant:

$("#item[\d]*2").html("D");

mais ça ne marche pas. Comment puis-je le faire fonctionner?

Démo JSFiddle

javascriptjqueryhtmlregex
29
Alexandru Severin

Oui, vous pouvez combiner le sélecteur l'attribut commence par et le sélecteur l'attribut se termine par

$('[id^="item"][id$="2"]').html("D");

[~ # ~] violon [~ # ~] (et vous devez activer jQuery dans le violon )

vous ne pouvez pas utiliser l'expression régulière pour faire correspondre les nombres entre les deux, pour cela, vous auriez besoin de filter()

$('[id^="item"]').filter(function() {
    return this.id.match(/item\d+_2/);
}).html("D");
35
adeneo

Vous pouvez utiliser les sélecteurs " commencer par " et " se terminer par " par jQuery, comme ci-dessous.

$("[id^='item'][id$='2']").html("D");

Documentation officielle:

15
Bhushan Kawadkar

La meilleure façon de procéder est d'utiliser les sélecteurs jQuery suivants

^= is starts with
$= is ends with

=  is exactly equal
!= is not equal
*= is contains

Donc dans votre cas:

var $items = $('[id^="item"][id$="2"]');
9
martynas

Voici le fonctionnement JS FIDDLE

HTML:

<p id="item5_2"> A </p>
<p id="item9_5"> B </p>
<p id="item14_2"> C </p>
<input type="button" value="Get element ids starting with 'item' and ending with '2'" onclick="get_ids()">

JS:

get_ids = function(){
    $('[id^="item"][id$="2"]').each(function() {
        alert($(this).attr('id'));
    });
}
4
Rahul Gupta

Vous pouvez combiner des sélecteurs d'attributs: violon

$("[id^='item'][id$='2']").html("D");
4
Adrift

Essaye ça

 <p id="item5_2"> A </p>
 <p id="item9_5"> B </p>
 <p id="item14_2"> C </p>

et...

 $('[id^="item"][id$="2"]')
4
Illaya

Vous pouvez utiliser le code suivant si vous souhaitez effectuer toute autre action:

$('[id^="item"]').each(function(){
  if(this.id.slice(-1) == 2){
    //Do something
    $(this).html('D');
  }

});
2
Brotheryura