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/

score 20 · Answer 1 · edited Nov 02 '15 at 01:25

20

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>

edited Nov 02 '15 at 01:25

Peter Mortensen

30,738
21
105
131

answered Oct 06 '15 at 15:10

Etheryte

24,589
11
71
116

2

This is brilliant! Only limitation is that after tags don't support html, so it might not be appropriate depending on how complex the content was. – James Brierley Oct 06 '15 at 15:13
1

Really like the approach, and don't find it limiting unless you have to support crappy browsers. – Adrian Oprea Oct 06 '15 at 15:16
great. @Nit. is it possible to put all letters through `counter(letter)`: 1A ,1B, 1C, ..., 2A, 2B, ... . Thanks you in advance – Sherali Turdiyev Oct 06 '15 at 16:03
2

This was a great answer also and it was hard to choose between but only because I needed to choose between using css or jquery for this. I wasn't aware I could do that in css so it has helped me alot. Thanks – Suzi Larsen Oct 06 '15 at 16:05
1

@SheraliTurdiyev that is also a good question as I would be interested to know if it could cover that – Suzi Larsen Oct 06 '15 at 16:06
@SheraliTurdiyev Yes it is, see http://stackoverflow.com/questions/16943805/css-pseudo-element-counters-can-you-increment-an-alphabet-letter-a-b-c . I've also added an example to the answer. – Etheryte Oct 06 '15 at 16:50

James Brierley · Accepted Answer · 2017-12-04T16:19:43.107

You need to halve the index to get the number, and use the remainder to get the letter.

https://jsfiddle.net/xj8d14yb/3/

$('.patch-cell').each(function() {
    var $this = $(this);
    // 1, 1.5, 2, 2.5, 3, 3.5...
    var number = $this.index() / 2 + 1;
    // A, B, A, B, A, B...
    var letter = $this.index() % 2 === 0 ? 'A' : 'B';
    $this.find('.fader-number').append(
        '<span class="patching-numbering">'
        // 1, 1, 2, 2, 3, 3...
        + Math.floor(number) 
        + letter 
        + "</span>");
});

Update: There's another way of doing this, where you get both the division and remainder at the same time. You can do this by converting to a string and splitting on the decimal point.

https://jsfiddle.net/xj8d14yb/6/

$('.patch-cell').each(function() {
    var $this = $(this);
    var number = ($this.index() / 2 + 1).toString().split('.');
    $this.find('.fader-number').append(
        '<span class="patching-numbering">'
        + number[0] 
        + (number[1] !== '5' ? 'A' : 'B')
        + '</span>');
});

score 4 · Answer 3 · edited Nov 02 '15 at 01:26

The best place to create such markup would be at the server with something like PHP or whatever server-side scripting language you may have access to.

In JavaScript, here is how to do it:

$('.patch-cell .fader-number').html(function(i,html) {
    return html + ' <span class="patching-numbering">' +
                  (Math.floor(i/2) + 1) +
                  ( i%2 ? ' B' : ' A' ) + '</span>';
});

$('.patch-cell .fader-number').html(function(i,html) {
    return html + ' <span class="patching-numbering">' + (Math.floor(i/2) + 1) + ( i%2 ? ' B' : ' A' ) + '</span>';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

score 2 · Answer 4 · answered Oct 06 '15 at 15:15

2

Or do it like this:

$('.patch-cell .fader-number').each(function(i) {
 $(this).append('<span class="patching-numbering">'+(1+Math.floor(i/2)) +['A','B'][i%2]+"</span>");
});

answered Oct 06 '15 at 15:15

Carsten Massmann

26,510
2
22
43

the first time that i see this : ['A','B'][i%2], it's great idea :) – Mimouni Oct 06 '15 at 15:56

score 1 · Answer 5 · answered Oct 06 '15 at 15:09

@JamesBrierley beat me to it, but here's an inline form.

http://jsfiddle.net/xj8d14yb/4/

$('.patch-cell').each(function(i) {
    $(this).find('.fader-number').append('<span class="patching-numbering">' + Math.floor(i / 2 + 1) + (i % 2 ? 'B' : 'A') + "</span>");
});

score 1 · Answer 6 · edited Nov 02 '15 at 01:27

1

Try this:

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

Demo: http://jsfiddle.net/x7q2uzh9/1/

edited Nov 02 '15 at 01:27

Peter Mortensen

30,738
21
105
131

answered Oct 06 '15 at 15:13

Mimouni

3,564
3
28
37

score 1 · Answer 7 · edited Nov 02 '15 at 01:27

If you want a dynamic way, use this demo.

//You can put other letters (A,B,C,D,...) or another objects.
var array = ["A", "B", "C"];
$('.patch-cell').each(function (i) {
    var index = Math.ceil(($(this).index() + 1) / array.length), 
        r = index + " " + array[i % array.length];

    $(this)
        .find('.fader-number')
        .append('<span class="patching-numbering">' +r + "</span>");
});

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

7 Answers7