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ドキュメントから:

idx タグは、現在の要素の数値インデックスを囲まれたブロックに渡します。

編集:私はあなたの質問を十分に読んでいませんでした.降順のカウントを探しているようです. idxヘルパーがカウントアップします。

もう一度編集：コメントで、あなたができるかどうか尋ねられ{@idx}{10 - .}{/idx}ました.

ダストは任意の式を評価しないため、答えはノーです。dust.helpers.idxしかし、タグの由来であるのソースを見ると、次のようになります。

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

反復の現在のインデックスの値で新しいコンテキストをプッシュしています。オブジェクトには、スタック内のアイテムの数をcontext.stack示す属性があることが判明したため、独自のヘルパーを作成できます。ofnegidx

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()2 つのパラメーターi(現在の要素のインデックス (セレクターに一致するすべての要素を反復処理するため)) とt、現在の要素のテキストである があります。

次に、これは、開き括弧、インデックス、および閉じ括弧を追加した後、現在のテキストを返します。

参考文献:

于 2013-02-12T22:49:36.443 に答える
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 に答える
0 
$('#StoryBoard').find('li').each(function(i){
    $(this).append(' ' + (10 - i ));
});

テスト？: http://jsbin.com/aduqix/1/edit

于 2013-02-12T22:46:21.723 に答える