首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >计算div元素的数量并将一个类附加到它们的父容器

问计算div元素的数量并将一个类附加到它们的父容器
EN

Stack Overflow用户
提问于 2020-06-19 01:04:25
回答 2查看 61关注 0票数 0

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

代码语言:javascript
复制
<div class="container four_items">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

在上面的示例中,“容器”div被放在类"four_items“的前面,因为它包含四个项

代码语言:javascript
复制
<div class="container three_items">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

在本例中,父容器的前缀是"thee_items",因为它包含带有"item“类的div的三个实例

非常感谢您的任何帮助。

EN

回答 2

Stack Overflow用户

发布于 2020-06-19 01:38:26

通过使用数值类items_3,您可以使用以下命令完成此操作

代码语言:javascript
复制
$(".container").addClass(function() {
  return "items_" + $(this).children(".item").length;
});

如果您需要"three“作为文本,那么可以将其索引到一个文本数组中(正如另一个答案中所详细描述的,因此这里不再重复)。

使用一些css显示正在发生的事情的示例代码片段:

​

代码语言:javascript
复制
$(".container").addClass(function() {
  return "items_" + $(this).children(".item").length;
});
代码语言:javascript
复制
.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; }
代码语言:javascript
复制
<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>

​

票数 1
EN

Stack Overflow用户

发布于 2020-06-19 01:16:48

你可以这样做,你需要在数组中设置数字字符串,就像我在下面的示例num中定义的那样,我已经在上面设置了条件,如果找不到,就会在上面添加数字计数。

​

代码语言:javascript
复制
$(document).ready(function(){
    
    // you can add list of numbers as you want
    let num = [
      "zero",
      "one",
      "two",
      "three",
      "four",
      "five"
    ];
    
    // find number of elements
    let num_of_item = $(".container .item").length;
    
    // check if element number is available then its return vlaue from num otherwise its will return original length number
    let find_item_num = num[num_of_item] ? num[num_of_item] : num_of_item;
    
    // this will add "three_items" class in ".container" class   
    $(".container").addClass(find_item_num + "_items");

    // show the list of classes
    console.log($(".container").attr("class"));
    
});
代码语言:javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62455455

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档