Question

我想从class="item x"获取类class="second select visible"的长度这是HTML。我在这里有两个同班的孩子，但我想从第二个父班得到那个班的长度。

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

这里有代码

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

Answer 1

如果您使用querySelectorAll，则可以这样操作，一次即可获得item的列表。

如您所见，当在元素上设置许多类时，在创建CSS选择器时可以使用.second或将它们链接.second.select.visible。

注意，类似x的类名无效，它至少应包含2个字符，因此我只使用了item。

Which characters are valid in CSS class names/selectors?

堆栈片段

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

Answer 2

您可以通过

获得计数

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

此处的示例-https://jsfiddle.net/kcsL26tb/2/

从主类获取子类长度

2 个答案: