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>

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

没有必要为此使用JavaScript;您只需使用CSS counters。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果你真的想，你也可以反击这些字母。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

Answer 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/

Answer 7

如果您想要一种动态方式，请使用 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>");
});

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

7 个答案: