1

私のJSは

b = "form#recipeSearch";
c = $(b).attr('action') + '?r';
f = "#searchResults";

var opentemplate = '<div class="row">';
var closetemplate = '</div>';

perPageLimit = response.max;
totalResults = response.total;

o = 0; // global counter

$.each(response.items, function(i,item) {

    var template = '                <div class="col3 boxee wrappedImg" id="' + item.uid + '">'
                 + '                    <div class="recipe-info">'
                 + '                        ' + item.nutritional.calories + ' CAL'
                 + '                        ' + item.rating 
                 + '                    </div>'
                 + '                    <a href="' + item.link + '" rel="popover" title="' + item.title + '" data-content="' + item.description + '"><img src="' + item.image + '" alt="' + item.title + '"></a>'
                 + '                </div>';      


    if(o == 0){ // if start of rows display open template
        $(f).append(opentemplate); 
    }        

    $(f).append(template); // inject template

    if(o == 4){ // if end of rows close template
        $(f).append(closetemplate); 
        o = 0; // reset global counter
    }  

    if(o == item.length - 1){ // if last item close the div
        $(f).append(opentemplate);
    }

    o++; //plus global counter
});

現在、次のように表示されています。

<div class="row"></div> <!-- ONLY ONCE :( -->
<div class="col3 boxee wrappedImg"></div>
<div class="col3 boxee wrappedImg"></div>
<div class="col3 boxee wrappedImg"></div>
<div class="col3 boxee wrappedImg"></div>
<div class="col3 boxee wrappedImg"></div>
<div class="col3 boxee wrappedImg"></div>
<div class="col3 boxee wrappedImg"></div>

等々...

私が探している場所

<div class="row">
    <div class="col3 boxee wrappedImg"></div>
    <div class="col3 boxee wrappedImg"></div>
    <div class="col3 boxee wrappedImg"></div>
    <div class="col3 boxee wrappedImg"></div>
</div>

その後、最後に到達するまで 4 つの項目を繰り返し、</ div > を挿入します。

今、私はコードを取得しようとしています if i = 0 次に、行タグの開始を表示し、4 つの項目の後、div を閉じます。これは、最終結果が得られるまで続き、最後に終了を表示する場合div。

何か提案があれば、私はこれに少し取り組んできました..

4

3 に答える 3

1

これを見てください：http://jsfiddle.net/KwNFN/4/

.each()出力文字列を作成する前にappend、文字列が完成するまで作成しません。これは、すべての要素の後に DOM を (誤って) 更新していないため、パフォーマンスもわずかに向上するはずです。

グローバルカウンターも必要ありませんi。十分なはずです。

最終的なコードは次のようになります。

output = "";

$.each(response.items, function(i,item) {
    var template = '<div class="col3 boxee wrappedImg" id="item.uid">'
                 + '  <div class="recipe-info">'
                 + '  your template goes here'
                 + '  </div>'
                 + '</div>';

    if(i%4 == 0){ // if start of rows display open template
       template = opentemplate + template;
    }
    // if end of row, or if last item, close the div
    else if(i%4 == 3 || i == response.items.length-1 ){ 
        template = template + closetemplate;
    }  

    output = output + template; // update template
});

$(f).append(output);
于 2012-10-28T19:27:24.380 に答える
1

これは私にとって問題のようです：

if(o == item.length - 1){ // if last item close the div
        $(f).append(opentemplate);
}

o は、item.length ではなく、response.items.length と比較する必要があります。

私が間違っているか教えてください。

于 2012-10-28T19:15:13.630 に答える
0 
o = 0; // global counter

なぜそれが必要なのですか？

function(i,item)

i- コレクション内のアイテムのインデックスであり、response.items 現在itemのアイテムです

$(f).append(opentemplate); 
$(f).append(closetemplate);

このコードはDOMを更新します。挿入できず<div class="row">、数回繰り返した後に追加します</div>

追加した：

var template;
$.each(response.items, function(index, item)
{
    if(index%4 == 0)
    {
        template = '<div class="row">';
    }

    template += '<div class="col3 boxee wrappedImg">...</div>';      

    if(index == response.items.length - 1 || index%4 == 3){
        $(f).append(template + '</div>');
    }
});
于 2012-10-28T19:23:07.730 に答える