使用jQuery计算特定元素的个数并将计数添加到类名中

Question

如何使用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>

- Rob

Answer 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>

- Mohammad

Answer 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>

- Suresh Atta

---

我认为我们不需要在addClass内部加入 .。 - Abhi

@Abhi 你说得对。我们不需要从 OP 代码中复制粘贴，也没有注意到它。不过要添加类并将其删除 :) - Suresh Atta

@Mohammad 为什么我要这样做？即使我这样做了，我也会加上注释。 - Suresh Atta

无论如何，在演示中，您有full-screen-1~5，但尝试添加它们。 - Mohammad

Answer 3

试试这个

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

- Paresh Maghodiya

---

复制和粘贴答案的方法。 - Difster

另外，您在回调括号中漏掉了“i”。 - Difster

我会花时间撰写答案，这样你就不会随意投票给任何人。 - Paresh Maghodiya