Question

我想使用jQuery对div列表中的项进行编号。现在它们都是硬编码的（第1项，第2项，第3项......），但我希望jQuery对它们进行编号，因为我将使用jQuery UI的可排序插件重新排序，所以我需要重新编写物品转移时的顺序。

这是我的HTML：

 <div class="my-sortable my-sortable-active"> 
  <div class="my-content-block">
    <div class="my-sortable-header">Item 1: [Title Field] </div>
    <div class="my-sortable-body"> HELLO </div>
  </div>
  <div class="my-content-block">
    <div class="my-sortable-header">Item 2: [Title Field] </div>
    <div class="my-sortable-body"> HI </div>
  </div>
  <div class="my-content-block">
    <div class="my-sortable-header">Item 3: [Title Field] </div>
    <div class="my-sortable-body"> ANOTHER HELLO </div>
  </div>
</div>

我有这个jQuery，但是每个项目都编号为＆＃34;项目1＆＃34;而不是1,2,3等：

$('.my-sortable-active .my-sortable-header').each(function() {
    $('.my-sortable-active .my-sortable-header').prepend("<span>" + ($(this).index() +1) + "</span>");
});

Answer 1

根据jQuery docu，您可以直接从each()回调中获取元素的索引，因此请使用：

$('.my-sortable-active .my-sortable-header').each(function( index ) {
    $(this).prepend("<span>" + (index +1) + "</span>");
});

Answer 2

$('.my-sortable-active .my-sortable-header').each(function(index) {
    $(this).prepend("<span>" + ($(this).index() +1) + "</span>");
});

Answer 3

$('.my-sortable-active .my-sortable-header').each(function(index) {
    $(this).prepend("<span>" + parseInt(index + 1) + " - </span>");
});

演示： http://jsfiddle.net/eMxwc/

Answer 4

您也可以使用CSS counter：

示例：http://codepen.io/splosch/pen/LdiGK

<强> HTML：删除＆＃34;项目[计数器]＆＃34;

<div class="my-sortable my-sortable-active"> 
  <div class="my-content-block">
    <div class="my-sortable-header">[Title Field] </div>
    <div class="my-sortable-body"> HELLO </div>
  </div>
  <div class="my-content-block">
    <div class="my-sortable-header">[Title Field] </div>
    <div class="my-sortable-body"> HI </div>
  </div>
  <div class="my-content-block">
    <div class="my-sortable-header">[Title Field] </div>
    <div class="my-sortable-body"> ANOTHER HELLO </div>
  </div>
</div>

<强> CSS：

.my-sortable {
  counter-reset: section;
}

.my-sortable-header:before {
  counter-increment: section;
  content: "Item " counter(section) ": ";
}

这样就不需要额外的javascript了，浏览器支持很棒（caniuse.com --> CSS counters）

哦，如果你列出的东西，请考虑使用<ul>或<ol>标签，它们在你的情况下也可以正常工作。

Div内的数量项目

4 个答案: