使用 jquery 计算特定元素并将计数添加到类名答案

【问题标题】：Count specific elements and add count to class name using jquery使用 jquery 计算特定元素并将计数添加到类名
【发布时间】：2018-01-10 21:54:42
【问题描述】：

如何使用 jquery 计算特定类的元素数量并将计数添加到每个元素中作为新的类名？

$('.full-screen').each(function(i) {
    $(this).addClass('.full-screen-', i);
});

我要创作：

<div class="full-screen full-screen-1"></div>
<div class="full-screen full-screen-2"></div>
<div class="full-screen full-screen-3"></div>
<div class="full-screen full-screen-4"></div>
<div class="full-screen full-screen-5"></div>

【问题讨论】：

标签： javascript jquery html classname

【解决方案1】：

您也可以使用.addClass( function ) 而不是.each()

$('.full-screen').addClass(function(i) {
    return 'full-screen-'+(i+1);
});

$('.full-screen').addClass(function(i) {
    return 'full-screen-'+(i+1);
});
console.log($('.full-screen'))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full-screen"></div>
<div class="full-screen"></div>
<div class="full-screen"></div>
<div class="full-screen"></div>
<div class="full-screen"></div>

【讨论】：

【解决方案2】：

你可以的

$('.full-screen').each(function(i) {
    $(this).addClass('full-screen-'+(i+1));

});

$('.full-screen').each(function(i) {
    $(this).addClass('full-screen-'+(i+1));
    console.log($(this)[0].outerHTML)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full-screen full-screen-1"></div>
<div class="full-screen full-screen-2"></div>
<div class="full-screen full-screen-3"></div>
<div class="full-screen full-screen-4"></div>
<div class="full-screen full-screen-5"></div>

【讨论】：

我认为我们不需要在 addClass 中添加 .
@Abhi 你是对的。我们不需要。从 OP 代码复制粘贴，并没有注意到它。但是添加类删除它:)
@Mohammad 我为什么要？即使我这样做，我也会评论。
无论如何，在演示中，您有 full-screen-1~5 但正在尝试添加它们。

【解决方案3】：

试试这个

$(".full-screen").each(function((i){
    $(this).addClass("full-screen-" + (i+1));
});

【讨论】：

复制和粘贴答案的方式。
另外，您在回调括号中留下了“i”。
我花时间写答案，这样你就不会投票给任何人