计数特定元素并使用 jquery 将计数添加到 class 名称

Question

如何计算具有特定 class 的元素的数量，并将计数作为新的 class 名称与 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>

Answer 1

你可以做到

$('.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>

Answer 2

您也可以使用 .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>

Answer 3

试试这个

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

计数特定元素并使用 jquery 将计数添加到 class 名称

Count specific elements and add count to class name using jquery

html

javascript

jquery

classname