如何将div作为列表编号,但复制每个数字并在末尾添加A和B.

Question

我试图按顺序编号列表,具体取决于我有多少div.

目前我正在使用一些代码来查找我的每个div的索引,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>

脚本:

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

没有必要为此使用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>

如果你真的想,你也可以反击这些字母.

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>

Answer 2

您需要将索引减半以获取数字,并使用余数来获取该字母.

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