作为jquery的新手,我正在寻找一种方法来计算父div中的div元素/类的数量,并根据存在的元素数量在父div前面添加一个类。
<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“的前面,因为它包含四个项
<div class="container three_items">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>在本例中,父容器的前缀是"thee_items",因为它包含带有"item“类的div的三个实例
非常感谢您的任何帮助。
发布于 2020-06-19 01:38:26
通过使用数值类items_3,您可以使用以下命令完成此操作
$(".container").addClass(function() {
return "items_" + $(this).children(".item").length;
});如果您需要"three“作为文本,那么可以将其索引到一个文本数组中(正如另一个答案中所详细描述的,因此这里不再重复)。
使用一些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>
发布于 2020-06-19 01:16:48
你可以这样做,你需要在数组中设置数字字符串,就像我在下面的示例num中定义的那样,我已经在上面设置了条件,如果找不到,就会在上面添加数字计数。
$(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"));
});<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>
https://stackoverflow.com/questions/62455455
复制相似问题