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个项目进行操作，直到它结束然后放入＆lt; / d i v＆gt;

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

有任何建议，我现在已经有点了......

Answer 1

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

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

o应与response.items.length进行比较，而不是与item.length进行比较。

告诉我，如果我错了？

Answer 2

看看这个：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 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>');
    }
});

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

3 个答案: