时间戳

首页 > 解决方案 > 计算 div 元素并将类附加到其父容器

jquery - 计算 div 元素并将类附加到其父容器

问题描述

作为 jquery 的绝对新手，我正在寻找一种方法来计算父 div 中的 div 元素/类，并根据存在的元素数量为该父添加一个类。

<div class="container four_items">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

在上面的例子中，“container” div 被添加到“four_items”类之前，因为它包含四个项目

<div class="container three_items">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

连续地，在这个例子中，父容器被添加了“thee_items”，因为它包含了三个带有“item”类的div实例

任何帮助是极大的赞赏

标签： jquerycss

解决方案

使用数字类items_3，你可以做到这一点

$(".container").addClass(function() {
  return "items_" + $(this).children(".item").length;
});

如果您需要“三”作为文本，则可以将其索引到文本数组中（如另一个答案中所述，因此此处不再重复）。

带有一些 css 的示例片段来显示正在发生的事情：

$(".container").addClass(function() {
  return "items_" + $(this).children(".item").length;
});
.container { float:left; height: 50px; width: 50px; }
.container>.item { border:1px solid #CCC; height:10px; width: 10px; }

.items_4 { border: 1px solid red; }
.items_3 { border: 1px solid green; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

推荐阅读