Question

我想检查不同div（具有相同id / class）的所有子节点是否都有活动的类。一个典型的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，但孩子的数量各不相同。重要的是，100％的孩子在成功之前就已经有了这个课程。

你会如何制作代码？

感谢。

Answer 1

您可以使用:not选择器计算元素：

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

Answer 2

使用length比较或Array.prototype.every。

let parent1 = document.querySelector(".parent1"),
  parent2 = document.querySelector(".parent2");

if (parent1.children.length == parent1.querySelectorAll(".active").length) {
  console.log("All children have the class “active”.");
}

// or

if (Array.from(parent1.children).every(child => child.classList.contains("active"))) {
  console.log("All children have the class “active”.");
}

// similarly, for .parent2:

console.log(parent2.children.length == parent2.querySelectorAll(".active").length);
console.log(Array.from(parent2.children).every(child => child.classList.contains("active")));

<div class="parent1">
  <div class="child active"></div>
  <div class="child active"></div>
  <div class="child active"></div>
  <div class="child active"></div>
</div>

<div class="parent2">
  <div class="child active"></div>
  <div class="child"></div>
  <div class="child active"></div>
  <div class="child"></div>
</div>

Answer 3

您可以使用解决方案

var flag = true;
$('.parent').find('div.child').each(function(){
  if(!$(this).hasClass('active'))
    flag = false;
});

if(flag)
  console.log("All Child divs have active class");
else
  console.log("All child divs doesn't have active class");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
   <div class="child active"></div>
   <div class="child active"></div>
   <div class="child active"></div>
   <div class="child active"></div>
</div>

又一个例子

var flag = true;
$('.parent').find('div.child').each(function(){
  if(!$(this).hasClass('active'))
    flag = false;
});

if(flag)
  console.log("All Child divs have active class");
else
  console.log("All child divs doesn't have active class");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
   <div class="child active"></div>
   <div class="child"></div>
   <div class="child active"></div>
   <div class="child"></div>
</div>

希望这会对你有所帮助。

Answer 4

您可以选择所需的项目，也可以为额外的课程过滤该项目。这些集应该是相同的长度

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

Answer 5

您可以使用child类计算所有元素，并将其与具有active类的对象数进行比较。如果他们匹配，你很高兴。

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

Answer 6

if($(".parent .child").length === $(".parent .child.active").length){/*true*/}

Answer 7

您可以使用:not css属性

执行此操作

＆＃13;

var childs = $('.parent').find('div.child:not(.active)');
if (childs.length > 0) {
console.log('not all active')
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
   <div class="child active"></div>
   <div class="child active"></div>
   <div class="child active"></div>
   <div class="child active"></div>
</div>

＆＃13;

Answer 8

有多种方法可以做到！最简单的一个是：

if($('.parent .child.active').length === $('.parent .child').length){
	//return true
  console.log('true');
}
else{
	//return false
  console.log('false');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
   <div class="child active"></div>
   <div class="child"></div>
   <div class="child active"></div>
   <div class="child"></div>
</div>

Answer 9

使用for循环和jquery =＆gt;

执行此操作

{
  "Id": "Policy1510826508027",
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Stmt1510826503866",
      "Action": [
        "s3:PutObject"
      ],
      "Effect": "Allow",
      "Resource": "arn:aws:s3:::athakur",
      "Principal": {
        "AWS": [
          "*"
        ]
      }
    }
  ]
}

否则：

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

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

Answer 10

您可以使用选择器轻松计算儿童数

var $parent1 = $('.parent');
var $parent2 = $('.parent2');

var areAllActive = function ($node) {
  var $childrenActive = $node.children('div.active');
  console.log($childrenActive.length);
  var $allChildren = $node.children('div');
  console.log($allChildren.length);
  
  return $childrenActive.length === $allChildren.length;
};

console.log(areAllActive($parent1));
console.log(areAllActive($parent2));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="parent2">
   <div class="child active"></div>
   <div class="child"></div>
   <div class="child active"></div>
   <div class="child"></div>
</div>

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

10 个答案: