Как получить все элементы, имена которых начинаются с некоторой строки?

У меня есть HTML-страница.

Я хотел бы извлечь все элементы, имя которых начинается с "q1 _".

Как я могу достичь этого в JavaScript?

Спасибо!

ОТВЕТЫ

Ответ 1

Быстрый и простой способ - использовать jQuery и сделать это:

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

Это захватит все элементы, чей атрибут имени начинается с "q1_". Чтобы преобразовать полученный набор объектов jQuery в коллекцию DOM, сделайте следующее:

var DOMeles = $eles.get();

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

В чистом DOM вы можете использовать getElementsByTagName для захвата всех входных элементов и циклического преобразования результирующего массива. Элементы с name, начиная с "q1_", попадают в другой массив:

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]);
    }
}

Ответ 2

Вы можете использовать getElementsByName ( "input" ), чтобы получить коллекцию всех входов на странице. Затем прокрутите коллекцию, проверяя имя на пути. Что-то вроде этого:

<!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>

Демо

Ответ 3

Метод HTML DOM querySelectorAll() выглядит здесь.

Ссылка W3School указана здесь

Синтаксис (как указано в W3School)

document.querySelectorAll(CSS selectors)

Итак, ответ.

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

Fiddle

Edit:

Учитывая предложение FLX, добавив ссылку на MDN здесь