JQuery - 列表中的数字项

Question

I would like the number of item's in my list to be numbered from 10 --> 0

I have the following code:

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

An example of how this would render in the browser would be:

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

However I would like it to render like this:

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

There will always be a maximum of 10 items

Answer 1

Since you're using dustjs, you have access to an @idx helper when iterating:

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

From the dustjs docs :

The idx tag passes the numerical index of the current element to the enclosed block.

EDIT: I didn't read your question closely enough - it looks like you're looking for a descending count. the idx helper will count up.

EDIT AGAIN: In the comments it was asked if you could just do {@idx}{10 - .}{/idx} .

The answer to that is no, because dust doesn't evaluate arbitrary expressions. But if you look at the source of dust.helpers.idx , which is where the tag comes from, it's just:

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

It's pushing a new context with the value of the current index of the iteration. It turns out that the context.stack object has an attribute of that gives you the number of items in the stack, so you can write your own negidx helper:

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

At this point, the following will accomplish what the original question asked:

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

And here's a fiddle.

Answer 2

I'd suggest:

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

JS Fiddle demo .

The anonymous function in the text() method, has two parameters i (the index of the current element (as it iterates over all the elements matched by the selector)) and t , which is the text of the current element.

This, then, returns the current text after appending an opening-bracket, the index and a closing bracket.

References:

• text() .

Answer 3

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

Test? : http://jsbin.com/aduqix/1/edit

Answer 4

here's a demo http://jsfiddle.net/GPEth/ - in jQuery I'm not sure if you want this fix in dust.js or jQuery

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