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

Posted 2023-03-16

【中文标题】使用 jquery 计算特定元素并将计数添加到类名

【英文标题】：Count specific elements and add count to class name using 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>

【参考方案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”。

我花时间写答案，这样你就不会投票给任何人