尝试在$.each项之前和之后添加div，同时包括结果本身

Question

我的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项，直到到达末尾，然后放入

现在，我试图让代码到if i=0，然后显示行标记的开始，然后在4项之后关闭div，然后继续，直到它们得到最终结果，如果显示结束div的结束。

如果有什么建议，我已经做了一段时间了。

Answer 1

看看这个：http://jsfiddle.net/KwNFN/4/

在.each()之前，我创建了一个输出字符串，直到字符串完成后，我才会创建输出字符串。对于性能来说，这也应该稍微好一点，因为您没有(错误地)在每个元素之后更新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);

Answer 2

这对我来说似乎是个问题：

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

O应该与response.items.length而不是item.length相比较。

如果我错了告诉我？

Answer 3

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>');
    }
});