在循环中从 Ajax 回调创建 2 个 UL，最多 10 个 Li

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 元素：http://jsfiddle.net/nRtmj/2/或者如果您想更改每个列表的元素数量，只需将10更改为其他内容： http://jsfiddle.net/nRtmj/3/