Question

我的页面上有很多DIV，ID相同

例如：

<div id="myDiv1">
   ...
</div>
<div id="myDiv2">
   ...
</div>
<div id="myDiv3">
   ...
</div>

...

<div id="myDiv20">
   ...
</div>

...

如您所见，ID属性看起来几乎相同 - 唯一的差异是每个ID中都有一个数字。

如何计算DIV的数量？我以为我可以做那样的事情：

var myDivs= document.getElementById('myDiv');

但返回null

Answer 1

您可以使用jQuery这样执行此操作：

$('div[id^=myDiv]')

如果你不能使用jQuery，你需要调用getElementsByTagName并循环检查ID属性的值。

Answer 2

var divs = document.getElementsByTagName('div');
var counter = 0;
for(var i in divs) {
    if(divs[i].id.indexOf('myDiv') === 0) {
        counter++;
    }
}

或只是

document.querySelectorAll('[id^=myDiv]').length

Answer 3

你可以使用jquery

//this will give you all divs start with myDiv in the id 
var divs = $("div[id^='myDiv']");

Answer 4

来自this site：

function getElementsByRegExpId(p_regexp, p_element, p_tagName) {
        p_element = p_element === undefined ? document : p_element;
        p_tagName = p_tagName === undefined ? '*' : p_tagName;
        var v_return = [];
        var v_inc = 0;
        for(var v_i = 0, v_il = p_element.getElementsByTagName(p_tagName).length; v_i < v_il; v_i++) {
            if(p_element.getElementsByTagName(p_tagName).item(v_i).id && p_element.getElementsByTagName(p_tagName).item(v_i).id.match(p_regexp)) {
                v_return[v_inc] = p_element.getElementsByTagName(p_tagName).item(v_i);
                v_inc++;
            }
        }
        return v_return;
    }

用法：

var v_array = getElementsByRegExpId(/^myDiv[0-9]{1,2}/);

如何使用几乎相同的ID属性获取DIV的计数？

4 个答案: