CODEWITHSUNDEEP
javascriptjqueryhtmlclassname
Rob
Rob

Reputation: 6380

Count specific elements and add count to class name using jquery

How can I count the number of elements with a specific class and add the count to each one as a new class name with jquery?

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

I want to create:

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

Upvotes: 3

Views: 1184

Answers (3)

Paresh Maghodiya
Paresh Maghodiya

Reputation: 218

Try this

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

Upvotes: 1

Suresh Atta
Suresh Atta

Reputation: 122026

You can do 

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

Upvotes: 1

Mohammad
Mohammad

Reputation: 21499

Also you can use .addClass( function ) instead of using .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>

Upvotes: 2

Related Questions