Как подсчитать divs как список, но дублировать каждое число и добавить A и B в конец

Я пытаюсь скопировать список в порядке, в зависимости от того, сколько у меня div.

В настоящий момент я использую некоторый код для поиска индекса каждого из моих divs, 1, 2, 3 и т.д., но мне действительно нужно иметь каждое div-шоу 1A, 1B, 2A и 2B, так что число дублируется и после последнего номера с буквой B оно переходит к следующему номеру.

Вот код, который я использую для примера:

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/

Ответ 1

Вам нужно вдвое уменьшить индекс, чтобы получить номер, и использовать остаток для получения буквы.

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>");
});

Обновление: существует еще один способ сделать это, когда вы одновременно получаете как разделение, так и остаток. Это можно сделать путем преобразования в строку и разбиения на десятичную точку.

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>');
});

Ответ 2

Нет необходимости использовать JavaScript для этого; Вы можете просто использовать счетчики CSS.

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>

Ответ 3

Лучшее место для создания такой разметки будет на сервере с чем-то вроде PHP или на любом серверном скриптовом языке, который у вас может быть доступ к.

В JavaScript, вот как это сделать:

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

Ответ 4

Или сделайте это как this:

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

Ответ 5

@JamesBrierley победил меня, но вот встроенная форма.

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>");
});

Ответ 6

Попробуйте следующее:

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

Демо: http://jsfiddle.net/x7q2uzh9/1/

Ответ 7

Если вы хотите динамический способ, используйте эту демонстрацию.

//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>");
});