Counting number of elements with specific ID pattern

Question

I would like to use javascript to count all elements that have ID pattern like:

"Q"+Number

and return the result into a text field "result".

Say, we have the following example:

<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>

Thanks in advance.

Yes, sure. I tried things like var count = document.getElementById("Q"+id).length and other options like that — AlexShevyakov, Mar 07 '14 at 16:30
possible duplicate of [Find all elements whose id begins with a common string](http://stackoverflow.com/questions/10111668/find-all-elements-whose-id-begins-with-a-common-string) — Roko C. Buljan, Mar 07 '14 at 16:33
Alexander - If you use jQuery, always mention that in the question or the tags on the question, so people know they can use jQuery in the answer. — T.J. Crowder, Mar 07 '14 at 17:02

score 6 · Answer 1 · answered Mar 07 '14 at 16:31

6

Use the jQuery filter method.

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

DEMO

answered Mar 07 '14 at 16:31

tewathia

6,890
3
22
27

How do you return the result into the text field? – AlexShevyakov Mar 07 '14 at 16:38
@Alexander Just set the value of the input tag to the element count. See http://jsfiddle.net/tewathia/6LEpS/3/ – tewathia Mar 07 '14 at 16:41
I was trying to use "grep" function. – AlexShevyakov Mar 07 '14 at 16:43
@Alexander `$.grep` would have worked too. See http://jsfiddle.net/tewathia/6LEpS/4/ – tewathia Mar 07 '14 at 16:50
2

Same comment as in Bradley Trager's answer . . . you should probably use the `/Q\d+$/` regex, to avoid IDs that have non-digit characters after the numbers, since the pattern stated in the OP only allows for numbers after the "Q". – talemyn Mar 07 '14 at 18:06

Bradley Trager · Accepted Answer · 2014-03-07T18:30:41.527

4

I know this has been answered, but here is an improvement on @kei's answer. Instead of filtering all DOM elements using $('*'), first narrow it down to only elements with id starting with a "Q". Another modification as suggested by @talemyn is to add a $ to the end of the regex in order to ensure that there are no characters following the digits.

$(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

edited Mar 07 '14 at 18:30

answered Mar 07 '14 at 16:54

Bradley Trager

3,570
3
26
33

1

It might not be necessary, depending on what the actual values will be, but you might want to use `/Q\d+$/` for the regex. The "starts with" selector will insure that the values start with "Q", but, without the `$` at the end of the regex, you could end up with IDs that have other characters after the numbers. – talemyn Mar 07 '14 at 17:56

score 3 · Answer 3 · answered Mar 07 '14 at 16:29

3

DEMO

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

caveat: [id^=Q] includes IDs that start with 'Q' so id="Question" will also be included.

answered Mar 07 '14 at 16:29

kei

20,157
2
35
62

Specifically, this uses `querySelectorAll`, which accepts CSS selectors and works on modern browsers (including IE8+), and an [attribute starts with selector](http://www.w3.org/TR/css3-selectors/#attribute-substrings). – T.J. Crowder Mar 07 '14 at 16:31
"starts with Q" is not the same as "Q followed by a number" – tewathia Mar 07 '14 at 16:31
@T.J.Crowder. That counts for sure but does not return into the text field. – AlexShevyakov Mar 07 '14 at 16:32
1

@ kei: Code dumps are only slightly useful. Saying **what** you're doing is much, much more useful. – T.J. Crowder Mar 07 '14 at 16:32
Dupe http://stackoverflow.com/questions/10111668/find-all-elements-whose-id-begins-with-a-common-string – Roko C. Buljan Mar 07 '14 at 16:34

Counting number of elements with specific ID pattern

3 Answers3