0

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);
Dominic
  • 62,658
  • 20
  • 139
  • 163
Skarlex
  • 27
  • 5

2 Answers2

1

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.

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>
Asons
  • 84,923
  • 12
  • 110
  • 165
-1

you can get the count by

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

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

  • 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