Question

我在xml响应中从服务器返回了50多个项目。我知道在服务器上处理会更好，但这是一个请求：

制作2个列表，其中包含打开<ul>，关闭<\ul>每个列表都有10个来自回复的项目。没有排序只是从头开始算。

我的循环现在看起来像这样：

var strHtml = '<ul>';
$(xml).find('Books row').each(function()
{
   strHtml += '<li><a href ="mylink">sometext</a></li>';
   // ...
});
strHtml += '<\ul>';
$('#category').empty().append(strHtml);

我需要的是2个列表，所以我必须在循环中处理打开和关闭UL标记。像这样的东西，但我不确定我是否做得很好：

var itemCounter = 1,
    strHtml ='';

    $(xml).find('Books row').each(function()    //note: function( index )
    {
       if (itemCounter  == 1){
         // first iteration opens <ul>
         strHtml += '<ul>'; 
       }
       else if(itemCounter > 10){
         // 10th list item created. 
         // close first UL and open next UL
          strHtml += '</ul><ul>';
       }
       else if(itemCounter > 20){
         // max items allowed detected
         // close <ul> and break loop
         strHtml += '</ul>';
         return;
       }

       // regular li
       strHtml += '<li><a href ="mylink">sometext</a></li>';
       itemCounter++;

    });
    $('#category').empty().append(strHtml);

你会如何处理？

旁注：

我的html / css结构需要有2个垂直并排列表。我发现最好的结果是两个并将它们向左浮动，而不是只有一个列表并浮动每个项目。

Answer 1

所有打开和关闭并检查计数器的东西似乎有点繁琐，而且这一行：

else if(itemCounter > 10){

每当计数器高于10时，

都会成立，因此它永远不会进入最终的else if区块。

我将所有li元素放入一个数组中，然后将.slice()放出数组并.join()：

var lis = [];
$(xml).find('Books row').each(function(){
   lis.push('<li><a href ="mylink">sometext</a></li>');
   if (lis.length === 20)
      return false; // break out of .each()
});

var $cat = $("#category").empty();
for (var i = 0; i < lis.length; i += 10)
    $cat.append('<ul>' + lis.slice(i,i+10).join("") + '</ul>');

演示：http://jsfiddle.net/nRtmj/1/

请注意，因为我在循环中完成了.slice()和.join()，所以如果更改第一个循环以便它不会停留在20个元素，则可以轻松创建其他ul元素：{ {3}}或者如果您想更改每个列表的元素数量，只需将10更改为其他内容：http://jsfiddle.net/nRtmj/2/

从循环中的ajax回调创建最多10个li的2个ul

1 个答案: