1

我希望列表中的项目数从 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 个项目

4

4 回答 4

2

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

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

从dustjs docs：

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

编辑：我没有仔细阅读您的问题 - 看起来您正在寻找递减计数。帮手会idx数。

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

答案是否定的，因为灰尘不会评估任意表达式。但是，如果您查看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}

这是一个小提琴。

于 2013-02-12T22:50:02.313 回答
1

我建议：

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

JS 小提琴演示。

该text()方法中的匿名函数有两个参数i（当前元素的索引（因为它遍历选择器匹配的所有元素））和t，它是当前元素的文本。

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

参考：

于 2013-02-12T22:49:36.443 回答
0 
$('#StoryBoard').find('li').each(function(i){
    $(this).append(' ' + (10 - i ));
});

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

于 2013-02-12T22:46:21.723 回答
0

这是一个演示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));
    })
});
于 2013-02-12T22:55:42.187 回答