web-dev-qa-db-fra.com

Comment obtenir tous les éléments dont le nom commence par une chaîne?

J'ai une page HTML. Je voudrais extraire tous les éléments dont le nom commence par "q1_".

Comment puis-je y parvenir en JavaScript?

javascripthtml
36
Misha Moroshko

Un moyen simple et rapide consiste à utiliser jQuery et procédez comme suit:

var $eles = $(":input[name^='q1_']").css("color","yellow");

Cela va récupérer tous les éléments dont l'attribut name commence par 'q1_'. Pour convertir la collection d'objets jQuery obtenue en une collection DOM, procédez comme suit:

var DOMeles = $eles.get();

voir http://api.jquery.com/attribute-starts-with-selector/

Dans le DOM pur, vous pouvez utiliser getElementsByTagName pour récupérer tous les éléments d’entrée et parcourir le tableau obtenu. Les éléments avec name commençant par 'q1_' sont déplacés vers un autre tableau:

var eles = [];
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
    if(inputs[i].name.indexOf('q1_') == 0) {
        eles.Push(inputs[i]);
    }
}
48
karim79

Vous pouvez utiliser getElementsByName ("input") pour obtenir une collection de toutes les entrées de la page. Parcourez ensuite la collection en vérifiant le nom. Quelque chose comme ça:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>

</head>
<body>

  <input name="q1_a" type="text" value="1A"/>
  <input name="q1_b" type="text" value="1B"/>
  <input name="q1_c" type="text" value="1C"/>
  <input name="q2_d" type="text" value="2D"/>

  <script type="text/javascript">
  var inputs = document.getElementsByTagName("input");
  for (x = 0 ; x < inputs.length ; x++){
    myname = inputs[x].getAttribute("name");
    if(myname.indexOf("q1_")==0){
      alert(myname);
      // do more stuff here
       }
    }
    </script>
</body>
</html>

Démo

19
graphicdivine

La méthode HTML DOM querySelectorAll () semble appropriée ici.

W3School Link donné ici

Syntaxe (telle que donnée dans W3School)

document.querySelectorAll(CSS selectors)

Donc la réponse.

document.querySelectorAll("[name^=q1_]")

Fiddle

Modifier:

Considérant la suggestion de FLX d’ajouter un lien vers MDN ici

8
paje007

Vous pouvez essayer d'utiliser jQuery avec l'attribut contient le préfixe sélecteur .

$('[id|=q1_]')

Je ne l'ai pas testé cependant.

0
anonymous

En utilisant un script Java pur, voici un exemple de code de travail

<input type="checkbox" name="fruit1" checked/>
<input type="checkbox" name="fruit2" checked />
<input type="checkbox" name="fruit3" checked />
<input type="checkbox" name="other1" checked />
<input type="checkbox" name="other2" checked />
<br>
<input type="button" name="check" value="count checked checkboxes name starts with fruit*" onClick="checkboxes();" />


<script>
function checkboxes()
{
var inputElems = document.getElementsByTagName("input"),
count = 0;
for (var i=0; i<inputElems.length; i++) {       
if (inputElems[i].type == "checkbox" && inputElems[i].checked == true && 
inputElems[i].name.indexOf('fruit') == 0) 
{
count++;

}

}
alert(count);
}
</script>
0
user3797450