计数子项根据长度添加类

Question

我有几个div，每个div都有相同的类。我想仅向包含单个项目的父母添加课程。

$(function() {
   if($('.parent').children('.child').length !== 1)
   $('.parent').addClass('single');
});  

.single {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

在第一个父级中，将添加“single”类，而第二个父级则不会。

谢谢你的帮助。

Answer 1

^✎修改

演示2 是一个不完整的解决方案，因为.querySelector()是一个＆＃34;懒惰＆＃34; 方法，一旦找到匹配，它就会无论是否有多场比赛，都会停止。在演示2 中，原始解决方案已被注释掉，并且在HTML中添加了一对额外的.parent > .child:only-child元素。

新解决方案包括：

1. ...使用 querySelectorAll() 将.parent > .child:only-child的多个个实例收集到NodeList - 然后... < / p>

2. ...使用 Array.from() 将该NodeList转换为数组...

3. ...以便我们可以将该数组运行到.forEach()数组方法中，该方法会将类.single分配给每个.parent。

:only-child CSS 和 jQuery 选择器。找到唯一的孩子然后 .parent() 。 jQuery版本非常易于使用，因为它实际上只需要查找一个孩子。查看演示1 以获取jQuery解决方案。

与jQuery类似，JavaScript可以使用CSS选择器:only-child来查找它，然后使用.parentNode来查找它.parent。要分配.single课程，我们使用.classList.add('single')。查看演示2 以获取详细的JavaScript解决方案。^✎

演示3 ，仅限CSS示例，使用CSS选择器:only-child。由于CSS级联性质的限制，我们无法通过定位其子级来访问父级。此外，不用说，我们不能在没有JS / jQ的情况下分配类.single。

演示1（jQuery）

＆＃13;
＆＃13;
$('.child:only-child').parent().addClass('single');
＆＃13;
div {
  min-height: 50px;
  padding: 10px;
  outline: 2px dotted green;
}

.single {
  outline: 3px dashed red
}

.child:only-child {
  outline: 1px solid blue
}
＆＃13;
<div class="parent">
  <div class="child"></div>
  </div>
  <div class="parent">
    <div class="child"></div>
      <div class="child"></div>
      </div>



      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

演示2（JavaScript）

＆＃13;
＆＃13;
/* Add a `/` to the start of line to enable code 

document.querySelector('.parent > .child:only-child').parentNode.classList.add('single');


//* Remove the `*` on the next line to disable the code
*/
var onlyChildren = Array.from(document.querySelectorAll('.parent > .child:only-child'));

onlyChildren.forEach(function(child, index) {

  child.parentNode.classList.add('single');

});
//*/
＆＃13;
div {
  min-height: 50px;
  padding: 10px;
  outline: 2px dotted green;
}

.single {
  outline: 3px dashed red
}

.child:only-child {
  outline: 1px solid blue
}
＆＃13;
<div class="parent">
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

演示3（仅限CSS）

＆＃13;
＆＃13;
div {
  min-height: 50px;
  padding: 10px;
  outline: 2px dotted green;
}

.single {
  outline: 3px dashed red
}

.child:only-child {
  outline: 1px solid blue
}
＆＃13;
<div class="parent">
  <div class="child"></div>
  </div>
  <div class="parent">
    <div class="child"></div>
      <div class="child"></div>
      </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

你的问题是这一行： $('.parent').addClass('single');。

通过执行此操作，您将匹配所有.parent。您需要迭代它们以有选择地添加单个类：

$(function() {
   $('.parent').each(function() {
    if ($(this).children('.child').length === 1) {
      $(this).addClass('single');
    }
  })
});

.single {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

（还修复了你的情况，应该检查孩子的数量是否等于1，没有差别）

Answer 3

$(function() {
$.each($('.parent'),function(){
   if($(this).children('.child').length == 1)
   $(this).addClass('single');
})
});

.single{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent">
  <div class="child">
  1</div>
</div>
<div class="parent">
  <div class="child">2</div>
  <div class="child">3</div>
</div>

现在试试。

Answer 4

您也可以使用find()。查找名称为child的课程。

＆＃13;

＆＃13;

$(function() {
   $('.parent').each(function() {
    if ($(this).find('.child').length == 1) {
      $(this).addClass('single');
    } 
  })
});

＆＃13;

.single {
  color: #00f;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

＆＃13;

＆＃13;

＆＃13;