检查div容器中是否有多个div内部没有jQuery

Question

我需要一个if else函数，用于检查div_container内是否有多个div_inner仅使用Javascript。

这是我的示例代码：

var inner = document.querySelector('.inner')
var container = document.querySelector('.container').innerHTML;
if(container > '1') {
  container.classList.add('test');
}
else {
  // do nothing
}

.test {
  color: red;
}

<div class="container">
  <div class="inner">Test</div>
</div>

<div class="container">
  <div class="inner">Test</div>
  <div class="inner">Test</div>
</div>

我只想使用Javascript。完全没有jQuery。

Answer 1

您必须使用querySelectorAll()来获取所有容器并遍历它们以检查内部div的长度：

var container = document.querySelectorAll('.container');
container.forEach(function(el){
  var inner = el.querySelectorAll('.inner').length;
  if(inner > 1) {
    el.classList.add('test');
  }
  else {
    // do nothing
  }
});

.test {
  color: red;
  background-color: lightgray;
}

<div class="container">
  <div class="inner">Test</div>
</div>

<div class="container">
  <div class="inner">Test</div>
  <div class="inner">Test</div>
</div>

Answer 2

您可以使用querySelectorAll()

for (const container of document.querySelectorAll('.container')) {
  if (container.querySelectorAll('.inner').length > 1) {
    container.classList.add('test');
  }
}

.test {
  color: red;
}

<div class="container">
  <div class="inner">Test</div>
</div>

<div class="container">
  <div class="inner">Test</div>
  <div class="inner">Test</div>
</div>