Create sequencial HTML numbers in javascript

Question

Need to create a html number for every four items generated.

the items are created by the backend not have a specific amount

<div class="item">item1 - pagination 1</div>
<div class="item">item2 - pagination 1</div>
<div class="item">item3 - pagination 1</div>
<div class="item">item4 - pagination 1</div>

<div class="item">item5 - pagination 2</div>
<div class="item">item6 - pagination 2</div>
<div class="item">item7 - pagination 2</div>
<div class="item">item8 - pagination 2</div>

<div class="item">item9 - pagination 3</div>
<div class="item">item10 - pagination 3</div>
<div class="item">item11 - pagination 3</div>
<div class="item">item12 - pagination 3</div>


<ul>
 // this html need generated by javascript
 <li class="pagination1">1<li>
 <li class="pagination2">2<li>
 <li class="pagination3">3<li>
<ul>

a random number? sequentially? Where do you put the number? as a class, id, text? — rogelio
– rogelio, Commented Oct 6, 2014 at 23:07
is sequentially, i need create a pagination from the quantity of items. — Cristiano Matos
– Cristiano Matos, Commented Oct 6, 2014 at 23:10

Johan · Accepted Answer · 2014-10-06 23:09:55Z

4

Something like this should get you started:

var page = 0;

$('.item').each(function(i){
    if(i % 4 === 0){
        var $li = $('<li/>').prop({ class: 'pagination' + (++page) });
    }
});

http://jsfiddle.net/c87tsvo8/

answered Oct 6, 2014 at 23:09

Johan

35.4k62 gold badges191 silver badges309 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

José Antonio Riaza Valverde · Accepted Answer · 2014-10-06 23:15:10Z

0

var c = Math.ceil(jQuery(".item").length / 4);

for (i = 0; i < c; i++) {
    jQuery("#ul-container").append('<li class="pagination' + (i + 1) + '">' + (i + 1) + '</li>');
}

edited Oct 6, 2014 at 23:15

answered Oct 6, 2014 at 23:09

José Antonio Riaza Valverde

7471 gold badge9 silver badges15 bronze badges

Comments

PeterKA · Accepted Answer · 2014-10-07 00:19:50Z

This should work even when the number in each group ( of .item ) changes:

    var
        IDs = [],
        ul = $('ul'),
        li = $('<li/>'),
        items = $('div.item').map(function(i,v) {
          return $(v).text().split(' ').pop().trim();
        }).get();
    $.each(items,function(i,v) {
      if( IDs.indexOf( v ) === -1 ) {
        IDs.push( v );
        ul.append( li.clone().addClass( 'pagination' + v ).text( v ) );
      }
    });

  $(document).ready(function() {
    var
        IDs = [],
        ul = $('ul'),
        li = $('<li/>'),
        items = $('div.item').map(function(i,v) {
          return $(v).text().split(' ').pop().trim();
        }).get();
    $.each(items,function(i,v) {
      if( IDs.indexOf( v ) === -1 ) {
        IDs.push( v );
        ul.append( li.clone().addClass( 'pagination' + v ).text( v ) );
      }
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">item1 - pagination 1</div>
<div class="item">item2 - pagination 1</div>
<div class="item">item3 - pagination 1</div>
<div class="item">item4 - pagination 1</div>

<div class="item">item5 - pagination 2</div>
<div class="item">item6 - pagination 2</div>
<div class="item">item7 - pagination 2</div>
<div class="item">item8 - pagination 2</div>

<div class="item">item9 - pagination 3</div>
<div class="item">item10 - pagination 3</div>
<div class="item">item11 - pagination 3</div>
<div class="item">item12 - pagination 3</div>

<ul></ul>

Collectives™ on Stack Overflow

Create sequencial HTML numbers in javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related