0

$.each()内に構築された配列からのデータを、繰り返さずに追加する方法を考え出そうとしています。ul.featured-list

<div id="home-page-featured">
    <ul class="featured-list"></ul>
    <ul class="featured-list"></ul>
    <ul class="featured-list"></ul>
</div>

の内容はli以下になります。

<li>
   <a href="http://local.site.com/chocolate-cakes/">
       <img width="186" height="186" src="http://local.site.com/view/img/blank.jpg" />
   </a>
</li>

次のように、それぞれに含まれるlis の数を計算します。ul

var amount = Math.floor($(document).width() / 186) + 2;

次にli、ajax で s を形成するコンテンツを取得します。

$.ajax({
    url  : '/json/projects/' + (amount * 3),
    type : 'GET',

    success: function(reply, textStatus, jqXHR) {
        var projects = [];
        $.each(reply, function(i, v) {
            if(v['gallery'][0])
            {
                console.log(v['gallery'][0]);
                projects.push(
                    '<li>'
                        +'<a href="/project/'+v['id']+'" title="'+v['name']+'">'
                            +'<img src="/data/images/'+v['gallery'][0].name+'" />'
                        +'</a>'
                    +'</li>'
                );
            }
        });
        console.log(projects);
    }
});

残っている唯一のジレンマは、それらliの sprojectsをすべてのファイルに再配布する方法です。ul.featured-list

liそれぞれが含むことができる最大の s が 10 であるとしましょう。11 のs が含まれているul.featured-list場合、10 は最初の行に移動し、残りは 2 番目の行に続きます。projectsliul.featured-list

私の考え：

  • $.each()コンテンツを繰り返すため、uls は機能しません
  • 最初にコンテンツの追加を開始し、停止ulに達しamountたら、既に追加されているものを削除して 2 番目のプロセスを続行するulこともできますが、それはそれほどエレガントな方法ではないと思います

それで、あなたはどう思いますか？この問題にアプローチするためのどのような提案がありますか?

アップデート

これは私が使用している現在のソリューションですが、それほど効率的ではないと感じています...どうすれば最適化できますか? http://jsfiddle.net/nV5RU/9/

4

2 に答える 2

2

これを試して

var arrayToFill = [...];  

$("ul.list").each(function (index) {  //  loop through all <ul> items
    $(this).find("li").each(function (index) { //  loop through all  <li> items inside
        $(this).html(arrayToFill.shift()); // fill & delete one on each turn
    });
});

例: http://jsfiddle.net/nV5RU/10/

于 2013-06-06T14:12:37.780 に答える
1

コードを最適化しておくと、ソリューションは非常に効率的で受け入れられると思います。$('ul.featured-list')つまり、ループのたびに呼び出す代わりに、変数にキャッシュしてからその変数を使用できます。

または、追加ロジックを別のロジックに移動し、要素を配列の形式で渡してfunction呼び出し、それらの項目を追加することもできます。functionloopul element

私にとって、あなたはすでに正しい方向に向かっています:-)。

sliceオブジェクトのメソッドを使用して、オリジナルを保持しながらarray要素をスライスできます。arrayarray

于 2013-06-06T13:46:48.760 に答える