Question

我需要检查另一个类块中是否存在类。块可以很多。嵌套可以是任何。请告诉我，我做错了什么。完整代码在这里https://codepen.io/BK-wmg12/pen/vdjxav 提前谢谢： - ）

    <head>
<style>
    .red {
        background-color: red;
    }
 </style>
</head>
<body>
<body>
 <div class="test">
   <div class="my">
     <span class="split1">
       Some TEXT1
     </span>

    </div>
   <div class="my">
         <span >
       Some TEXT2
     </span>

    </div>
   <div class="my">
       <span class="split1">
       Some TEXT3
     </span>
<script>
    var els = document.getElementsByClassName('my');
    for( var i = 0; i < els.length; i++ ) {
        for( var j = 0; j < els[i].length; j++ ){

            if( !els[i].childNodes[j].classList.contains('split1') ){
                els[i].childNodes[j].classList.add('red');
            }
        }

    }
</script>

</body>

Answer 1

我需要检查另一个块中是否存在类类

使用querySelector

var isPresent = !!document.querySelector( ".my .split1" )

现在迭代所有（使用querySelectorAll）

isPresent && Array.from( document.querySelectorAll( ".my .split1" ) ).forEach( function(ele){
   ele.classList.add('red');
})

<强>演示

var isPresent = !!document.querySelector(".my .split1")


isPresent && Array.from(document.querySelectorAll(".my .split1")).forEach(function(ele) {
  ele.classList.add('red');
})

.red 
{
  background-color: #f00;
}

<div class="test">
  <div class="my">
    <span class="split1">
       Some TEXT1
     </span>

  </div>
  <div class="my">
    <span>
       Some TEXT2
     </span>

  </div>
  <div class="my">
    <span class="split1">
       Some TEXT3
     </span>
  </div>
</div>

Answer 2

您的代码基本上有两个问题：

1）您需要子节点的长度

for( var j = 0; j < els[i].childNodes.length; j++ )

2）您需要检查子节点是否不是简单文本

els[i].childNodes[j].nodeName !== "#text"

或者您甚至可以检查它是否是跨度

els[i].childNodes[j].nodeName === "span"

源代码如下：

var els = document.getElementsByClassName('my');
for( var i = 0; i < els.length; i++ ) {
  console.log(els[i].childNodes)
    for( var j = 0; j < els[i].childNodes.length; j++ ){
    if(els[i].childNodes[j].nodeName !== "#text" && !els[i].childNodes[j].classList.contains('split1') ){
            els[i].childNodes[j].classList.add('red');
        } 
    }

}

Codepen供参考：https://codepen.io/YasirKamdar/pen/paVwrG

检查另一个类JS的块内是否存在类

2 个答案: