How to number divs like a list but to duplicate each number and add an A and B to the end

Question

I am trying to number a list in order depending on how many divs I have.

At the moment I am using some code to find the index of each of my divs, 1, 2, 3, etc., but what I really need is to have each div show 1A, 1B, 2A, and 2B, so that the number is duplicated and after the last number with the letter B, it moves on to the next number.

Here is the code I am using for the example:

HTML:

<div class="patch-cell">     <div class="fader-number">test</div> </div> <div class="patch-cell">     <div class="fader-number">test</div> </div> <div class="patch-cell">     <div class="fader-number">test</div> </div> <div class="patch-cell">     <div class="fader-number">test</div> </div> <div class="patch-cell">     <div class="fader-number">test</div> </div>  <!--example of how I want it to look--->  <div class="patch-cell-test">     <div class="fader-number">Example  1 A</div> </div> <div class="patch-cell-test">     <div class="fader-number">Example  1 B</div> </div> <div class="patch-cell-test">     <div class="fader-number">Example  2 A</div> </div> <div class="patch-cell-test">     <div class="fader-number">Example  2 B</div> </div> 

SCRIPT:

$('.patch-cell').each(function() {     $(this).find('.fader-number').append('<span class="patching-numbering">' + ($(this).index() +1) + "</span>"); }); 

http://jsfiddle.net/susannalarsen/xj8d14yb/1/

Answer 1

There's no need to use JavaScript for this; You could simply use CSS counters.

body {    counter-reset: n;  }  .patch-cell:nth-child(odd) .fader-number:after {    counter-increment: n;    content: counter(n) "A";  }  .patch-cell:nth-child(even) .fader-number:after {    content: counter(n) "B";  }

<div class="patch-cell">    <div class="fader-number">test</div>  </div>  <div class="patch-cell">    <div class="fader-number">test</div>  </div>  <div class="patch-cell">    <div class="fader-number">test</div>  </div>  <div class="patch-cell">    <div class="fader-number">test</div>  </div>  <div class="patch-cell">    <div class="fader-number">test</div>  </div>

If you really wanted to, you could counter the letters as well.

body {    counter-reset: main sub;  }  .patch-cell:nth-child(odd) {    counter-reset: sub;    counter-increment: main sub;  }  .patch-cell:nth-child(even) {    counter-increment: sub;  }  .patch-cell .fader-number:after {    content: counter(main) counter(sub, upper-alpha);  }

<div class="patch-cell">    <div class="fader-number">test</div>  </div>  <div class="patch-cell">    <div class="fader-number">test</div>  </div>  <div class="patch-cell">    <div class="fader-number">test</div>  </div>  <div class="patch-cell">    <div class="fader-number">test</div>  </div>  <div class="patch-cell">    <div class="fader-number">test</div>  </div>