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>

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

任何建议，我已经在这一段时间了..

4

3 回答 3

1

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

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

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

告诉我我是否错了？

于 2012-10-28T19:15:13.630 回答
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 回答
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 回答