计算具有特定 ID 模式的元素数量答案

【问题标题】：Counting number of elements with specific ID pattern计算具有特定 ID 模式的元素数量
【发布时间】：2014-03-07 16:24:55
【问题描述】：

我想使用 javascript 来计算所有具有 ID 模式的元素，例如：

“Q”+数字

并将结果返回到文本字段“result”中。

比方说，我们有以下例子：

<div>
    <div id="Q01">
        <p>Some text</p>
    </div>
    <div id="Q02">
        <p>Some text</p>
    </div>
    <div id="Q03">
        <p>Some text</p>
    </div>

        <label for="number">Number of DIVs:</label>
        <input type="number" name="result" id="number">
</div>

提前致谢。

【问题讨论】：

您忘记发布您尝试过的内容。
是的，当然。我尝试了 var count = document.getElementById("Q"+id).length 和其他类似的选项
Find all elements whose id begins with a common string的可能重复
@Roko - 是的，它非常接近，抱歉我错过了那个（（
Alexander - 如果您使用 jQuery，请务必在问题或问题上的标签中提及这一点，以便人们知道他们可以在答案中使用 jQuery。

标签： javascript count

【解决方案1】：

使用 jQuery filter 方法。

$('*').filter(function () {
    return this.id.match(/Q\d+/); //regex for the pattern "Q followed by a number"
}).length;

DEMO

【讨论】：

如何将结果返回到文本字段中？
@Alexander 只需将输入标签的值设置为元素计数即可。见jsfiddle.net/tewathia/6LEpS/3
我正在尝试使用“grep”功能。
@Alexander $.grep 也可以。见jsfiddle.net/tewathia/6LEpS/4
与 Bradley Trager 的回答中的评论相同。 . .您可能应该使用 /Q\d+$/ 正则表达式，以避免在数字后有非数字字符的 ID，因为 OP 中规定的模式只允许在“Q”之后使用数字。

【解决方案2】：

我知道这已得到解答，但这是对 @kei 答案的改进。不要使用 $('*') 过滤所有 DOM 元素，而是首先将其缩小到仅 id 以“Q”开头的元素。 @talemyn 建议的另一个修改是在正则表达式的末尾添加一个$，以确保数字后面没有字符。

$(function () {
    var result = $('[id^=Q]').filter(function () {
        return this.id.match(/Q\d+$/); //regex for the pattern "Q followed by a number"
    }).length;

    $('input[name=result]').val(result);
});

DEMO

【讨论】：

这可能不是必需的，具体取决于实际值，但您可能希望将/Q\d+$/ 用于正则表达式。 “开始于”选择器将确保值以“Q”开头，但是，如果在正则表达式末尾没有 $，您最终可能会得到在数字后面有其他字符的 ID。

【解决方案3】：

DEMO

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

警告：[id^=Q] 包含以“Q”开头的 ID，因此id="Question" 也将包含在内。

【讨论】：

具体来说，它使用querySelectorAll，它接受CSS选择器并适用于现代浏览器（包括IE8+）和attribute starts with selector。
“以Q开头”与“Q后跟数字”不同
@T.J.Crowder。这很重要，但不会返回到文本字段中。
@kei：代码转储只有一点用处。说出你正在做的什么非常非常有用。
欺骗stackoverflow.com/questions/10111668/…