Get length of child element with a specific class name?

Question

I am able to get the elements with the specific class name, but unable to retrive the length of the amount of elements with that specific class name.

How should I go about getting the number of elements with the specific class name of a child element?

jsFiddle

document.getElementById('contact').onsubmit = function() {
    var children = this.children;

    for(var i = 0; i < children.length; i++) {
        if (children[i].className == 'req') {

            console.log(children[i]); //defined
            console.log(children[i].length); //undefined

        }
    }

    return false;
};

`children[i]` is a specific DOM element. Why do you expect it to have a `.length` property? — Bergi, Aug 08 '13 at 17:46
@theshadowmonkey: `children` is a `HTMLCollection` which has no such method. — Bergi, Aug 08 '13 at 17:49
@Shivam: Do you actually want to use the `required` attribute instead of a class name? — Bergi, Aug 08 '13 at 17:49
@Bergi That would be my preferred method of choice, but when I set `required` attribute to an element, the browser itself handles the validation, which I would want to overwrite by creating my own validation script, but not sure how too. Which is why I am using class name `req` instead. — Shivam, Aug 08 '13 at 17:53
http://stackoverflow.com/questions/3090369/disable-validation-of-html5-form-elements discusses a few tricks that let you use your own logic :-) — Bergi, Aug 08 '13 at 18:05

score 2 · Answer 1 · answered Aug 08 '13 at 17:48

2

I think you want to count the number of child elements with that class:

document.getElementById('contact').onsubmit = function() {
    var children = this.children;
    var count = 0;
    for(var i = 0; i < children.length; i++)
        if (children[i].classList.contains('req'))
            count++;
    console.log(count+" of "+children.length+" have the class 'req'");
    return false;
};

answered Aug 08 '13 at 17:48

Bergi

630,263
148
957
1,375

Yes, this also works well, and was what I was looking to accomplish myself, but I figured out a more simple way to do this. I posted an answer. – Shivam Aug 08 '13 at 17:57

score 2 · Accepted Answer · answered Aug 08 '13 at 17:55

2

I found a simple solution to this myself:

Please let me know what you guys think?

jsFiddle

document.getElementById('contact').onsubmit = function() {
    var req = this.getElementsByClassName('req').length;
    console.log(req);
    return false;
};

answered Aug 08 '13 at 17:55

Shivam

2,208
3
24
39

That doesn't search only the direct children, but it will probably work well for you :-) – Bergi Aug 08 '13 at 18:01
See http://stackoverflow.com/questions/6481612/queryselector-search-immediate-children also. You could do `document.querySelectorAll("#contact > .req").length` though – Bergi Aug 08 '13 at 18:10

score 0 · Answer 3 · answered Aug 08 '13 at 17:48

0

Use children[i].value.length to get values.

jsFiddle

answered Aug 08 '13 at 17:48

PiLHA

2,326
1
24
32

Alex Garulli · Answer 4 · 2013-08-08T18:07:03.077

0

var arr = Array.prototype.slice.call( children )

sorry this what I meant http://jsfiddle.net/e4CQu/15/

edited Aug 08 '13 at 18:07

answered Aug 08 '13 at 17:51

Alex Garulli

737
1
12
29

You can loop directly through the `this.children` as well. – Bergi Aug 08 '13 at 18:02
u can loop but not get lenght – Alex Garulli Aug 08 '13 at 18:07
Of course the collection has a `.length` property, otherwise your `slice` conversion wouldn't work at all. – Bergi Aug 08 '13 at 18:08
mm true, so if I can ask why his children[i].length resulted undefined? – Alex Garulli Aug 08 '13 at 18:15
@Bergi why did u comment "children[i] is a specific DOM element. Why do you expect it to have a .length property?" ? – Alex Garulli Aug 08 '13 at 18:21

score 0 · Answer 5 · answered Aug 08 '13 at 17:54

0

DOM elements do not have a length property. If you are trying to get how many characters are in it, you should instead be using the length property of value, like this: children[i].value.length

answered Aug 08 '13 at 17:54

markasoftware

12,292
8
41
69

Get length of child element with a specific class name?

5 Answers5