如何获取所有名称以某个字符串开头的元素？

我有一个HTML页面。如何获取所有名称以某个字符串开头的元素？

我想提取名称以“q1_”开头的所有元素。

我该如何在JavaScript中实现这一点？

谢谢！

来源

2010-04-11 Misha Moroshko

你的意思是标签名称或的'name'属性的值？ – Gumbo 2010-04-11 15:15:39

相同类型标签的所有元素都是问题吗？他们都是DIV，还是LI？ – graphicdivine 2010-04-11 15:19:09

是的，所有元素都是“输入”类型。 – 2010-04-11 15:25:24

一个快速简便的方法是使用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]); 
    } 
}

来源

2010-04-11 15:18:19 karim79

什么没有jQuery？ – Varun 2011-11-23 05:35:22

Varun，在karim79的回答中修剪的第二个代码是纯javascript，他没有使用jQuery。 – cleberz 2014-05-06 17:40:03

不错的答案，除了你需要'.css（“color”，“yellow”）;'，因为'font-color'在css中不存在。我也经常犯这个错误。：P – 2015-02-20 23:43:07

您可以尝试使用jQuery与Attribute Contains Prefix Selector。

$('[id|=q1_]')

虽然没有测试过。

来源

2010-04-11 15:22:42 anonymous

'[attr | = value]'选择器应该用于语言标识符。 – Gumbo 2010-04-11 15:24:47

您可以使用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>

Demo

来源

2010-04-11 15:56:16 graphicdivine

感谢您的代码示例！ – 2010-04-11 16:06:14

更有效吗？ – Varun 2011-11-23 05:35:41

@Varun这是什么效率低下？ – graphicdivine 2011-12-30 14:08:29

HTML DOM querySelectorAll（）方法似乎容易在这里。

W3School链接给here

语法（如W3School给出）

document.querySelectorAll(CSS selectors)

所以答案。

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

Fiddle

编辑：

考虑FLX的建议添加链接MDN here

来源

2016-06-16 09:57:10 paje007

Your anwer是有效的，但W3School被认为是一个不好的来源（到处都是过时的文档）。更好地使用MDN。 – FLX 2016-06-16 10:09:29

如何获取所有名称以某个字符串开头的元素？

回答

相关问题