Sélectionnez à l'aide de div ID générique

Comment sélectionner un div en utilisant son ID, mais avec un widcard?

Si le DIV ID est statusMessage_1098, je tiens à le sélectionner en quelque sorte, comme document.getElementById('statusMessage_*').

C'est parce que jusqu'à ce que la page est générée, je ne sais pas le suffixe de la pièce d'identité et un seul ID sera présent dans une page. Est-ce possible?

Merci pour toute aide.

OriginalL'auteur Nirmal | 2009-12-21

12

À l'aide de jQuery, vous pouvez le faire
```
$("div[id^='statusMessage_']")
```
Voir attributeStartsWith

Edit - avec un nom de classe sélecteur de

Si vous pouvez utiliser un nom de classe puis vous pouvez utiliser quelque chose comme cela
```
$$('div.myDivClass');
```
obtient tous les éléments div avec la classe de myDivClass'

Merci pour cette solution. Mais malheureusement, je n'utilise pas jQuery. Mais le Prototype est OK. Toute l'équivalent de ce à l'état de Prototype? Merci!
Désolé, je ne suis pas familier avec le prototype.
Prototype prend en charge le même sélecteur, il suffit d'utiliser $$: prototypejs.org/api/utility/dollar-dollar
Merci!!!! Cela a aidé.
Pour clarifier cela, pour faire ce que l'OP voulait à l'état de Prototype, la commande est: $$("div[id^='statusMessage_']")

OriginalL'auteur rahul

Générique Solution basée sur l'id de l'élément attribut

Oui c'est possible. Cela répond à votre question directement, sans dépendre de tiers JavaScript ou des Api ou des attributs autres que l'id de l'élément. Aussi, vous n'avez pas à utiliser class=

Personnalisé Appel De La Méthode Exemple

//Uses JavaScript regex features to search on id= attribute
var arrMatches = document.getElementsByRegex('^statusMessage_.*');

Cela devient un tableau contenant tous les éléments ayant un identifiant commençant par "statusMessage_" (même imbriquée).

Exemple de mise en œuvre réutilisables et générique

Voici une implémentation pour la getElementsByRegex fonction qui recherche dans les DOM pour la regex, à partir de document. Il est attaché à l'objet document pour des raisons de commodité et selon le comportement attendu.

<head>
<script>
//Called as: document.getElementsByRegex("pattern").
//Returns an array of all elements matching a given regular expression on id.
//'pattern' argument is a regular expression string.
//
document['getElementsByRegex'] = function(pattern){
   var arrElements = [];   //to accumulate matching elements
   var re = new RegExp(pattern);   //the regex to match with

   function findRecursively(aNode) { //recursive function to traverse DOM
      if (!aNode) 
          return;
      if (aNode.id !== undefined && aNode.id.search(re) != -1)
          arrElements.push(aNode);  //FOUND ONE!
      for (var idx in aNode.childNodes) //search children...
          findRecursively(aNode.childNodes[idx]);
   };

   findRecursively(document); //initiate recursive matching
   return arrElements; //return matching elements
};
</script>
</head>

Il y a probablement plus efficace implémentations mais celui-ci fournit un point de départ. Le corps de la fonction peut être remplacé par d'autres algorithmes selon les goûts.

Tester le Code

Enfin, test à l'aide d'un code HTML blurb avoir des éléments imbriqués comme ce

<body>

<div id="statusMessage_1">1</div>
<div id="statusMessage_2">2
    <div id="content">other stuff</div>
    <div id="statusMessage_3">3</div>
</div>

<script>
   //a quick test to see if you get the expected result.
   var arrMatches = document.getElementsByRegex('^statusMessage_.*');
   alert('found ' + arrMatches.length + ' matches - expected 3.')
</script>

Ce bloc HTML contient trois éléments à partir de id="statusMessage_; par conséquent, le test d'alerte va dire

"trouvé 3 matchs - 3"

Additif Info pour les Variations

Si vous voulez limiter la recherche aux seuls éléments div ou un autre type d'élément spécifique, alors vous voudrez pour injecter le suivant getElementByTagName code dans l'algorithme de restreindre l'ensemble des éléments de la recherche contre.

var arrDivs = document.getElementsByTagName("div"); //pull all divs from the doc

Vous pouvez modifier l'algorithme générique en passant le nom de la balise dans un deuxième argument du filtre avant de lancer la recherche commence comme cela

var arrMatches = document.getElementsByRegex('^statusMessage_.*', 'div');

OriginalL'auteur John K

8

Juste pensé qu'il valait la peine de mettre à jour le fil avec les plus récentes sur la façon de le faire en JavaScript, était encore à venir dans les recherches.
```
document.querySelector("[id^='statusMessage_']");
```
caniuse.com listes elle peut être utilisée sur les numéros de IE8 et un grand soutien dans d'autres navigateurs.

Merci, c'est exactement ce que je cherchais en 2018
Merci pour cette réponse. Si on a besoin d'obtenir plusieurs éléments document.querySelectorAll() peut être utilisé.

OriginalL'auteur itsvicki

En jquery, le plus simple est d'attribuer une classe pour chaque div laisser dire "statusMessage'
quelque chose comme:

<div id="statusMessage_<%=someid%>" class="statusMessage">...</div>

Pour tous:

$('.statusMessage')  //or $('div.statusMessage') //or $('div[id^=statusMessage_]')

Sans jquery:

var divs = document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
   if(divs[i].id.indexOf('statusMessage_')==0){
      //do stuff here for every divs[i]
   }
}

Merci pour votre suggestion. Maintenant, qui a suscité une idée. Je peux utiliser un nom de classe pour elle et l'accès à l'aide de cette classe.

OriginalL'auteur jerjer

function switch2 (elementid)
{
  var divs = document.getElementsByTagName("div");
  for ( var i = 0; divs[i]; i++ )
  {
    if (divs[i].id.indexOf("statusMessage_") == 0)
    {
      document.getElementById (divs[i].id).style.display = "none";
    }
  }
}

Il suffit de remplacer document.getElementById (divs[i].id).style.display = "none"; avec ce CSS que vous souhaitez appliquer à tous les divs qui ont un id qui commence avec statusMessage_.

OriginalL'auteur bjd223

0

Je ne suis pas sûr de savoir comment vous êtes peuplant mais si c'est à partir du code-behind, vous pouvez essayer quelque chose comme:
```
document.getElementById('statusMessage_<%= generatedID %>')
```
où generatedID est l'IDENTIFIANT généré à partir du code derrière.

Générer la première fois, c'est OK pour moi. Mais de l'appeler dans la suite javascript est ce que vient comme un problème. C'est parce que les appels AJAX va modifier la div après un certain temps et l'ID peut-être changé.

OriginalL'auteur James_2195
0

Manière habituelle de le faire dans le css est de donner les éléments de la classe statusMessage' en plus de leur id unique. Ensuite, vous pouvez créer une règle css avec un sélecteur qui va affecter tous les éléments de cette classe. Par exemple
```
 .statusMessage {color: red;}
```
Rappelez-vous que les éléments peuvent avoir plus d'une classe. Par exemple
```
<p id="id123" class="class1 class2">
```
OriginalL'auteur Larry K

Si vous ne souhaitez pas utiliser jQuery, il y a un autre moyen plus simple pour cela:

Attribuer un class - pour un exemple de nom de "message", et utiliser les éléments suivants:

function getElementsByClass(searchClass,node,tag) {
    var classElements = new Array();
    if ( node == null )
        node = document;
    if ( tag == null )
        tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}

Ici comment vous l'appelez:

var messages = getElementsByClass("message");

for(var index=0; index < messages.length; index++) {
 //prompt the content of the div
 //alert(message[index].innerText);
}

OriginalL'auteur Ramiz Uddin

Vous devez vous connecter pour publier un commentaire.