JQuery-对列表中的项目进行编号

JQuery - Number items in a list

本文关键字：编号 项目 列表 JQuery-      更新时间：2023-09-26

我希望列表中的项目数量从10开始编号-->0

我有以下代码：

<ul class="StoryBoard" id="StoryBoard"> 
{#storylines}
<li>{text|bl|s}</li>    
{/storylines}
</ul>

这将如何在浏览器中呈现的一个例子是：

<ul class="StoryBoard" id="StoryBoard">
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>

然而，我希望它呈现为这样：

<ul class="StoryBoard" id="StoryBoard">
<li>Test (10)</li>
<li>Test (9)</li>
<li>Test (8)</li>
<li>Test (7)</li>
</ul>

最多将有10个项目

由于您使用的是dustjs，因此在迭代时可以访问@idx助手：

{#storylines}
<li>{text|bl|s} ({@idx}{.}{/idx})</li>    
{/storylines}

来自dustjs文档：

idx标记将当前元素的数字索引传递给封闭的块。

编辑：我没有仔细阅读你的问题——看起来你在寻找递减计数。则CCD_ 2助手将向上计数。

再次编辑：在评论中，有人问你是否可以只做{@idx}{10 - .}{/idx}。

答案是否定的，因为dust不会评估任意表达式。但如果你看看dust.helpers.idx的来源，也就是标签的来源，它只是：

function (chunk, context, bodies) { 
  return bodies.block(chunk, context.push(context.stack.index)) 
}

它使用迭代的当前索引值来推送一个新的上下文。事实证明，context.stack对象有一个属性of，它为您提供堆栈中的项数，因此您可以编写自己的negidx助手：

dust.helpers.negidx = function(chunk, context, bodies) {
  return bodies.block(chunk, context.push(context.stack.of - context.stack.index));
};

在这一点上，以下内容将完成最初提出的问题：

{#storylines}
<li>{text|bl|s} ({@negidx}{.}{/negidx})</li>    
{/storylines}

这是一把小提琴。

我建议：

$('#StoryBoard li').text(function(i,t) { return t + ' (' + (10 -  i )+ ')'});

JS Fiddle演示。

text()方法中的匿名函数有两个参数i（当前元素的索引（当它在选择器匹配的所有元素上迭代时））和t，后者是当前元素的文本。

然后，在追加一个左括号、索引和一个右括号后，返回当前文本。

参考文献：

  • CCD_ 11
$('#StoryBoard').find('li').each(function(i){
    $(this).append(' ' + (10 - i ));
});

测试？：http://jsbin.com/aduqix/1/edit

这里有一个演示http://jsfiddle.net/GPEth/-在jQuery中我不确定你是想在dust.js还是jQuery 中进行此修复

$(function () {
   var $li   = $('ul#StoryBoard li'),
       count = $li.size();
    $li.each(function (index) {
        $(this).text($(this).text() + (count - index));
    })
});
相关文章：