如何按名称选择元素列表？

Question

我想选择所有以特定序列开头的元素。 该序列将像work_XXXXXX一样。如何实现这一目标？

Answer 1

我提供两个jQuery和JavaScript的答案，但最好的办法是使用jQuery，因为用JavaScript你将不得不循环throught所有元素，并匹配所需的格局研究，这是非常耗时的过程，所以我的偏好是使用jQuery：

查找所有具有以'work_'开头的属性名称并将文本放入其中的输入。

<input name="newsletter" /> 

<input name="work_man" /> 
<input name="work_boy" /> 
<script> 
    $('input[name^="work_"]').val('work here!'); 
</script> 

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

http://api.jquery.com/category/selectors/

使用javascript他们对此没有内置的关键字，但您可以通过遍历所有的元素做到这一点，并检查您所需图案的匹配，这种方式：

var idStart = "work_"; 
var componentContainer = document.getElementById("containerTable").getElementsByTagName("DIV"); 
for (var i = 0; i < componentContainer.length; i++) { 
    var id = componentContainer[i].id; 
    if ((id.length >= idStart.length) && (id.substring(0, idStart.length - 1) == idStart))// you can also use regular expression here to match desired pattern 
    { 
      //do something... 
    } 
} 

Answer 2

您可以对所有这些元素使用相同的类，并按类选择它们。

Answer 3

如果你的意思是id属性，你可以做...

var elems = document.getElementsByTagName('*'); 

var myElems = []; 

for(var i = 0, length = elems.length; i < length; i++) { 

    if (elems[i].id.match(/^work_/)) { 
    myElems.push(elems[i]); 
    } 

} 

myElems将包含所有的元素，他们的id属性与work_开始。

See it on jsfiddle.net

如果你指的是class属性实在是有点不同。

var elems = document.getElementsByTagName('*'); 

var myElems = []; 

for(var i = 0, length = elems.length; i < length; i++) { 

    var classes = elems[i].className.split(' '); 

    for (var j = 0, classesLength = classes.length; j < classesLength; j++) {  
     // If you have a trim function, use it on the class name. 
     if (classes[j].match(/^work_/)) { 
      myElems.push(elems[i]); 
      break; 
     } 
    } 

} 

See it on jsfiddle.net

当然，如果你使用一个库如jQuery

就容易多了。

$('*[id^=work')