如何获取以"已知文本"开头的"div"中的所有元素

Question

我div在HTML文档中有一个元素.

我想提取这里面所有的元素div与id属性的一个已知的字符串(如"q17_")开始.

如何使用JavaScript实现这一目标？

如果需要,为简单起见,我可以假设其中的所有元素div都是类型input或select.

Answer 1

var matches = [];
var searchEles = document.getElementById("myDiv").children;
for(var i = 0; i < searchEles.length; i++) {
    if(searchEles[i].tagName == 'SELECT' || searchEles.tagName == 'INPUT') {
        if(searchEles[i].id.indexOf('q1_') == 0) {
            matches.push(searchEles[i]);
        }
    }
}

我再次强烈建议 jQuery执行以下任务:

$("#myDiv :input").hide(); // :input matches all input elements, including selects

Answer 2

选项1:可能最快(但如果在Document或SVGElement上使用,则某些浏览器不支持):

var elements = document.getElementById('parentContainer').children;

选项2:可能最慢:

var elements = document.getElementById('parentContainer').getElementsByTagName('*');

选项3:需要更改代码(包装表单而不是围绕它的div):

// Since what you're doing looks like it should be in a form...
var elements = document.forms['parentContainer'].elements;

var matches = [];

for (var i = 0; i < elements.length; i++)
    if (elements[i].value.indexOf('q17_') == 0)
        matches.push(elements[i]);

Answer 3

对于现代浏览器，无需 jQuery，这很容易：

document.getElementById('yourParentDiv').querySelectorAll('[id^="q17_"]');

querySelectorAll 采用一个选择器（按照 CSS 选择器）并使用它递归搜索“yourParentDiv”元素的子元素。选择器使用的^=意思是“开始于”。

请注意，自 2009 年 6 月以来发布的所有浏览器都支持此功能。