0

xml応答でサーバーから50を超えるアイテムが返されます。サーバーで処理する方が良いと思いますが、これはリクエストです。

開いているリスト<ul>と閉じているリストを2つ作成し、<\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つの垂直方向のリストが並んでいる必要があります。1つのリストを作成してすべてのアイテムをフローティングするのではなく、2つにまとめて、それらを左にフロートさせるのが最良の結果であることがわかりました。

4

1 に答える 1

1

カウンターの開閉とチェックは少し面倒に思えますが、次の行もあります。

else if(itemCounter > 10){

カウンターが上になると毎回trueになるので、最後のブロック10に入ることはありません。else if

すべてのli要素を1つの配列に入れ.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/またはifリストごとの要素数を変更したい場合は、を別の10ものに変更してください：http: //jsfiddle.net/nRtmj/3/

于 2012-12-15T02:20:16.300 に答える