Javascript 检查div的所有孩子是否都有课

我想检查不同div（具有相同id/类）的所有子类是否都激活了该类。一个典型的if/else语句，但我不能完全理解它

请参见此处的示例，这是正确的，因为所有子级都具有相同的类：

<div class="parent">
   <div class="child active"></div>
   <div class="child active"></div>
   <div class="child active"></div>
   <div class="child active"></div>
</div>

<div class="parent">
   <div class="child active"></div>
   <div class="child"></div>
   <div class="child active"></div>
   <div class="child"></div>
</div>

这是错误的，因为并非所有的孩子都有相同的课程：

<div class="parent">
   <div class="child active"></div>
   <div class="child active"></div>
   <div class="child active"></div>
   <div class="child active"></div>
</div>

<div class="parent">
   <div class="child active"></div>
   <div class="child"></div>
   <div class="child active"></div>
   <div class="child"></div>
</div>

有许多div相似，但孩子的数量不同。重要的是，100%的孩子在这门课成为现实之前就上了这门课

你将如何编写代码

---

谢谢。

给你一个解决方案

var标志=true；
$（'.parent'）.find（'div.child'）.each（function（）{
if（！$（this）.hasClass（'active'））
flag=false；
});
国际单项体育联合会（旗）
log（“所有子div都有活动类”）；
其他的
log（“所有子div都没有活动类”）
使用
长度
比较或


let parent1=document.querySelector（“.parent1”），
parent2=document.querySelector（“.parent2”）；
if（parent1.children.length==parent1.queryselectoral（“.active”）.length）{
log（“所有子类都有“active”类）；
}
//或
if（Array.from（parent1.children.every）（child=>child.classList.contains（“active”））{
log（“所有子类都有“active”类）；
}
//同样，对于.parent2：
log（parent2.children.length==parent2.queryselectoral（“.active”）.length）；
log（Array.from（parent2.children.every）（child=>child.classList.contains（“active”））
您可以选择所需的项目，还可以筛选为额外课程设置的项目。这些集合的长度应该相同

let $children = $('.parent').children('.child');
console.log( $children.length == $children.filter('.active').length);

您可以计算具有
子类的所有元素，并将其与具有
活动类的对象数进行比较。如果他们匹配，你就可以走了

if ($('.parent .child').length === $('.parent .child.active')) {
    // everything good
}

您可以使用
：not
选择器对元素进行计数：

var result = $('.parent').find('.child:not(.active)').length === 0;

使用for循环和jquery=>

 var childs = $('.parent').find('.child');

 for (var i=0;i<=childs.length;i++)
      if (!childs[i].hasClass('active'))
          return false
 return true

您可以使用
：not
css属性执行此操作


var childs=$（'.parent'）.find（'div.child:not（.active）'）；
如果（儿童长度>0）{
console.log（'并非全部处于活动状态'）
}
有多种方法可以做到这一点！
最简单的是：
if（$（'.parent.child.active'）.length===$（'.parent.child'）.length）{
//返回真值
console.log（'true'）；
}
否则{
//返回错误
console.log（'false'）；
}
您可以使用选择器轻松地对孩子进行计数


var$parent1=$（'.parent'）；
变量$parent2=$（'.parent2'）；
var areAllActive=函数（$node）{
变量$childrenActive=$node.children（'div.active'）；
console.log（$childrenActive.length）；
var$allChildren=$node.children（'div'）；
log（$allChildren.length）；
返回$childrenActive.length===$allChildren.length；
};
console.log（ArealActive（$parent1））；
console.log（ArealActive（$parent2））

虽然没有错，但对于这样简单的功能来说，each有点过头了：）您想检查某个div元素的所有子元素是否都激活了class
或者某个div元素的所有子元素是否都具有相同的类名称吗？它似乎不起作用。什么也没发生：这段代码只是不打印控制台中的任何文本。我让一位家长有所有活跃的孩子，另一位没有。