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

Question

我希望使用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>

事先感谢您。

- AlexShevyakov

---

你忘记发布你尝试过的内容了。 - j08691

是的，当然。我尝试了一些像 var count = document.getElementById("Q"+id).length 这样的选项。 - AlexShevyakov

可能是重复的问题：查找所有ID以相同字符串开头的元素 - Roko C. Buljan

@Roko - 是的，非常接近了，很抱歉我错过了它。 - AlexShevyakov

Alexander - 如果你使用jQuery，一定要在问题或标签中提到它，这样答案的人就知道可以使用jQuery。 - T.J. Crowder

@T.J. Crowder - 谢谢，我会的。 - AlexShevyakov

Answer 1

使用jQuery的filter方法。

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

{{链接1：演示}}

- tewathia

---

你如何将结果返回到文本字段中？ - AlexShevyakov

@Alexander 只需要将输入标签的值设置为元素计数即可。请参见 http://jsfiddle.net/tewathia/6LEpS/3/ - tewathia

我正在尝试使用“grep”函数。 - AlexShevyakov

@Alexander $ .grep 也可以工作。请参见http://jsfiddle.net/tewathia/6LEpS/4/。 - tewathia

与Bradley Trager的回答相同的评论...您应该使用/Q\d+$/正则表达式，以避免在数字后面有非数字字符的ID，因为OP中指定的模式只允许在“Q”之后出现数字。 - talemyn

Answer 2

我知道这个问题已经被回答过了，但是这里有一个对@kei答案的改进。不要使用$('*')来过滤所有DOM元素，而是首先将其缩小到只包含以“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

- Bradley Trager

---

根据实际值而定，可能并不必要，但您可能希望对正则表达式使用/Q\d+ $ /。 "以...开头"的选择器将确保这些值以“Q”开头，但是，如果正则表达式末尾没有$，则可能会出现带有数字后其他字符的ID。 - talemyn

Answer 3

DEMO

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

[id^=Q] 包含以 'Q' 开头的 ID，因此也将包括 id="Question"。>

提示：这段代码中的“[id^=Q]”表示选择所有以“Q”开头的ID。

- kei

---

具体来说，这里使用了 querySelectorAll，它接受 CSS 选择器并适用于现代浏览器（包括 IE8+），以及一个 属性开始选择器。 - T.J. Crowder

“以Q开头”和“Q后跟一个数字”不是同一回事。 - tewathia

@T.J.Crowder。这当然计算，但不会返回到文本字段中。 - AlexShevyakov

@ kei：代码转储只有稍微有用。说出你正在做什么要更加有用得多。 - T.J. Crowder

查找所有以相同字符串开头的元素：https://dev59.com/bmkw5IYBdhLWcg3wJHGF - Roko C. Buljan