根据id计算div元素

时间:2009-11-07 14:01:21

标签: javascript html

我的页面类似于:

<div id="content">
<div id="boxes">
  <div id="box:content:1:text" />
  <div id="box:content:2:text" />
  <div id="another_id" />
  <div id="box:content:5:text" />
</div>
</div>

我想知道id与表达式框匹配的div的数量:content:X:text(其中X是数字)。我可以使用纯javascript或jquery来做到这一点。

但是在盒子里面我可以有几种类型的div,我不想计算(“another_id”),我可以从元素的X和下一个元素中得到间隙,它们不是顺序的。

我正在寻找一种基于正则表达式获取元素的方法,但我没有找到任何有趣的方法。这是一种可能的方法吗?

由于

2 个答案:

答案 0 :(得分:4)

jQuery的:

$("div[id]").filter(function() {
    return !(/^box:content:\d+:text$/.test(this.id));
}).size();

Pure JavaScript:

var elems = document.getElementsByTagName("div"),
    count = 0;
for (var i=0, n=elems.length; i<n; ++i) {
    if (typeof elems[i].id == "string" && /^box:content:\d+:text$/.test(this.id)) {
        ++count;
    }
}

答案 1 :(得分:1)

要扩展Boldewyn的注释,您可以提供多个由空格分隔的类,然后单独或组合使用这些类。

这可能会消除对id的需求,但我已将它们留在以防万一:

<div id="content">
<div id="boxes">
  <div id="box:content:1:text" class="box content 1 text" />
  <div id="box:content:2:text" class="box content 2 text" />
  <div id="another_id" />
  <div id="box:content:5:text" class="box content 5 text" />
</div>
</div>


然后使用jQuery,您只需计算所需的项目:

$j('#content>#boxes>.box.content.text').length

(或者只是使用'#boxes>.box.text'或其他适用于你想要匹配的东西)