0

在我的 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 个垂直并排的列表。我发现最好的结果是两个并将它们向左浮动，而不是有一个列表并浮动每个项目。

4

1 回答 1

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()and .join()，所以如果您更改第一个循环使其不会在 20 个元素处停止，您可以轻松创建额外的 ul 元素：http: //jsfiddle.net/nRtmj/2/或如果您想更改每个列表的元素数量只需将其更改10为其他内容：http: //jsfiddle.net/nRtmj/3/

于 2012-12-15T02:20:16.300 回答