CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3158310
user3158310

Reputation: 3

Div is added to repeat

I started some time studying javascript, and I have some questions and was wondering if you can do this.

I have a div: 

<div class="category"> </div>

it automatically repeats everytime I create a new category in a forum system. this is default "so there is no possibility to manually"

So wanted it to be added numbering for each category. thereby: 

<div class="category1"> </div> 
<div class="category2"> </div> 
<div class="category3"> </div> 
<div class="category4"> </div>

and so on, all this through jquery or javascript.

If it is possible what is the way?

Upvotes: 0

Views: 59

Answers (2)

Ford
Ford

Reputation: 2597

HTML

<button id="category-button">Add Category</button>
<div id="category-container"></div>

Javascript

$('#category-button').on('click', function() {
    var $container = $('#category-container'),
        $elem = $('<div/>', {
            "class": "category" + ($container.children().length + 1)
        });
    $container.append($elem);
});

Upvotes: 1

Danijel
Danijel

Reputation: 12689

jQuery solution:

$( ".category" ).each( function( index ) {
    $( this ).addClass( "category"+(index+1) );
});

Result:

<div class="category category1"> </div> 
<div class="category category2"> </div> 
<div class="category category3"> </div> 
<div class="category category4"> </div>

Solution 2:

$( ".category" ).each( function( index ) {
    $( this ).removeClass( "category" ).addClass( "category"+(index+1) );
});

Result:

<div class="category1"> </div> 
<div class="category2"> </div> 
<div class="category3"> </div> 
<div class="category4"> </div>

FIDDLE

Upvotes: 1

Related Questions