Get subclass length from main class

Question

I want to get the lenght of class class="item x" from class="second select visible" Here is the html. I have here 2 parent class with same class child but I want to get the lenght of that class from 2nd parent class.

<div class="first select">
    <div class="item x">text 1</div>
    <div class="item x">text 2</div>
</div>

<div class="second select visible">
    <div class="item x">text 1</div>
    <div class="item x">text 2</div>
    <div class="item x">text 2</div>
</div>

And here I have the code

setInterval(function check(optv2){
    const testexist = document.getElementsByClassName('second select visible').lenght > 0;
    var list = /* lenght of 'item x' from 'second select' */
        if (testexist == true){
            console.log(testexist);
            if(list == 2){
               /* code */   
                }else{
                    console.log("var is not 2");
            }
            /* var 4*/
             if(list == 4){
                /*code*/
                }else{
                    console.log("var is not 4");
            }
        }else{
            console.log('class not avaible');
            clearInterval();
        }
}, 30000);

You are writing length spelling wrong everywhere. – Ullas Hunka Jul 24 '18 at 13:05 — Ullas Hunka, Jul 24 '18 at 13:05

Asons · Accepted Answer · 2018-07-24T13:34:26.493

If you use querySelectorAll you can do it like this, where it will get you the list of item's in one go.

As you can see, when having many classes set on an element, you can use one, .second, or chain them, .second.select.visible, when create the CSS selector.

Note, a class name like x is not valid, it should have at least 2 characters, so I used only item.

Which characters are valid in CSS class names/selectors?

Stack snippet

//setInterval(function check(optv2){
const list = document.querySelectorAll('.second.select.visible .item');
if (list.length > 0) {
  /* var 2*/
  if (list.length == 2) {
    /* code */
  } else {
    console.log("var is not 2");
  }

  /* var 3*/
  if (list.length == 3) {
    console.log("var is 3");
  } else {
    console.log("var is not 3");
  }

  /* var 4*/
  if (list.length == 4) {
    /*code*/
  } else {
    console.log("var is not 4");
  }
} else {
  console.log('class not avaible');
  clearInterval();
}
//}, 30000);

<div class="first select">
  <div class="item x">text 1</div>
  <div class="item x">text 2</div>
</div>

<div class="second select visible">
  <div class="item x">text 1</div>
  <div class="item x">text 2</div>
  <div class="item x">text 2</div>
</div>

score -1 · Answer 2 · answered Jul 24 '18 at 13:20

-1

you can get the count by

document.querySelectorAll(".select.visible .item.x")

example here - https://jsfiddle.net/kcsL26tb/2/

answered Jul 24 '18 at 13:20

Rohith Ayyampully

16
4

An answer using that tech is given already, and as stated in the same answer, a class name shouldn't be just one character, and even if OP posted like such, you shouldn't repeat the syntax error in an answer. – Asons Jul 24 '18 at 13:25
@rohithayyampully If you add `.length` to the end of your code line, it would be a little more clear. What you have now, just returns a collection, not the number of elements. – Ryan Wilson Jul 24 '18 at 13:38

Get subclass length from main class

2 Answers2