根据元素的数量添加一个类

Add a class depending on number of elements

本文关键字：一个 添加 元素      更新时间：2023-09-26

根据存在的元素数量向一系列元素添加类的好方法是什么?

所以在这种情况下如果有两个或更少的项目类是"half"-如果少于8个，应该用"quarter"类。

是否有一种方法来添加/删除一个类取决于有多少"项目"(s)有在一个部分?

<section>
 <div class="item half"> 1 </div>
 <div class="item half"> 2 </div>
 </section>

   <section>
 <div class="item quarter"> 1 </div>
 <div class="item quarter"> 2 </div>
 <div class="item quarter"> 3 </div>
 <div class="item quarter"> 4 </div>
 <div class="item quarter"> 5 </div>
 </section>

你总是可以得到你的元素的计数，如

var elems = document.querySelectorAll(".item");
var count = elems.length;
if(count < 2) {
// add class half
} else if (count < 8) {
// add class quarter
}

你可以试试:

$(document).ready(function(){
  $('section').each(function(i, sect){
    var itemsInSection = $(sect).children('.item');
    var count = itemsInSection.length;
    if(count < 3){
      itemsInSection.addClass('half');
    }else if(count < 8){
      itemsInSection.addClass('quarter');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
 <div class="item half"> 1 </div>
 <div class="item half"> 2 </div>
 </section>
   <section>
 <div class="item quarter"> 1 </div>
 <div class="item quarter"> 2 </div>
 <div class="item quarter"> 3 </div>
 <div class="item quarter"> 4 </div>
 <div class="item quarter"> 5 </div>
 </section>

相关文章：