尝试在 $.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个项目依次类推，直到到达末尾，然后放i v>

现在我正在尝试获取代码，如果 i = 0 然后显示行标记的开头，然后在 4 个项目之后，关闭 div，然后继续直到他们得到最终结果，如果它是结束显示结束 div。

任何建议，我已经研究了一段时间了..

Answer 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);

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