Javascript 如何获取名称以某个字符串开头的所有元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2617480/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get all elements which name starts with some string?
提问by Misha Moroshko
I have an HTML page. I would like to extract all elements whose name starts with "q1_".
我有一个 HTML 页面。我想提取名称以“q1_”开头的所有元素。
How can I achieve this in JavaScript?
我如何在 JavaScript 中实现这一点？
回答by karim79
A quick and easy way is to use jQueryand do this:
一种快速简便的方法是使用jQuery并执行以下操作：
var $eles = $(":input[name^='q1_']").css("color","yellow");
That will grab all elements whose nameattribute starts with 'q1_'. To convert the resulting collection of jQuery objects to a DOM collection, do this:
这将获取name属性以“q1_”开头的所有元素。要将 jQuery 对象的结果集合转换为 DOM 集合，请执行以下操作：
var DOMeles = $eles.get();
see http://api.jquery.com/attribute-starts-with-selector/
见http://api.jquery.com/attribute-starts-with-selector/
In pure DOM, you could use getElementsByTagNameto grab all input elements, and loop through the resulting array. Elements with namestarting with 'q1_' get pushed to another array:
在纯 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]);
}
}
回答by graphicdivine
You can use getElementsByName("input") to get a collection of all the inputs on the page. Then loop through the collection, checking the name on the way. Something like this:
您可以使用 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>
回答by paje007
HTML DOM querySelectorAll() method seems apt here.
HTML DOM querySelectorAll() 方法在这里似乎很合适。
W3School Link given here
此处提供W3School 链接
Syntax (As given in W3School)
语法（在 W3School 中给出）
document.querySelectorAll(CSS selectors)
So the answer.
所以答案。
document.querySelectorAll("[name^=q1_]")
Edit:
编辑：
Considering FLX's suggestion adding link to MDN here
考虑到 FLX 的建议，在此处添加指向 MDN 的链接
回答by user3797450
Using pure java-script, here is a working code example
使用纯 java 脚本，这里是一个工作代码示例
<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>
回答by anonymous
You can try using jQuerywith the Attribute Contains Prefix Selector.
您可以尝试将jQuery与Attribute Contains Prefix Selector 一起使用。
$('[id|=q1_]')
Haven't tested it though.
不过没测试过。
