0

ページ上にいくつかのリンクがあり、それらはjQueryで配列に変換されます。基本的に、ユーザーがページで[さらに読み込む]をクリックすると、4つの画像が含まれるように生成したいと思います<ul>（残りの画像が4つない場合は、それ以下にします。その後、閉じる必要があり</ul>ます。どのように書くかわかりません。これ、誰か知っていますか？また、このコードは大丈夫ですか、それともなんとか整理する必要がありますか？

私が本当に望んでいるのは、ロード中に4つの画像を非表示にしてから、新しい画像を下にスライドさせる<ul>方法ですが、コールバック関数をどこに記述できるかわからないため、方法がわかりません。方法を知っているなら、私を正しい方向に向けてください！

これまでの私のコード。

var hrefs = jQuery.makeArray(jQuery('ul.js a'))

        jQuery('#load_more').bind('click',function(){

            jQuery('.img_gallery').append('<ul>')
            for(var c = 0; c < 4; c++){
                if((hrefs.length) > 0){
                jQuery('<li>').append(jQuery('<img>', {src:hrefs[0]})).appendTo(jQuery('.img_gallery'))
                hrefs.splice(0,1)
                }
            }
            jQuery('.img_gallery').append('<ul>')
        })

ありがとう ： ）

4

3 に答える 3

0

配列hrefsには、URLではなくDOM要素が含まれています。代わりにこれを試してください：

var hrefs = jQuery.map(jQuery('ul.js a'), function(el,i) {
    return $(el).attr('href');
});

ちなみに、for次のようにループを最適化できます。

for (var c = 0; c < 4; c++) {
    if (hrefs.length) {
        jQuery('<li>').append(jQuery('<img>', {
            src: hrefs.shift() // removes and returns the first array element
        })).appendTo(jQuery('.img_gallery'));
    };
};​
于 2012-10-08T17:29:26.647 に答える
0

このアプローチを試してください..これはずっときれいです

var hrefs = jQuery.makeArray(jQuery('ul.js a'))

jQuery('#load_more').bind('click', function() {
    var html = '<ul>'
    for (var c = 0; c < 4; c++) {
        if ((hrefs.length) > 0) {
            html += '<li><img src="' + hrefs[0] + '" /></li>' ;
            hrefs.splice(0,1);
        }
    }
    html += '</ul>'        
    jQuery('.img_gallery').append(html )
})​
于 2012-10-08T17:18:35.843 に答える
0

jQuery を使用する場合、htmlタグを追加するのではなく、html要素を追加します。

を実行し$('.img_gallery').append('<ul>')、次に$('.img_gallery').append('<li>')を実行すると、次のような構造になります。

<div class="img_gallery">
    <ul></ul>
    <li></li>
</div>

要素を作成するだけで、終了タグについて心配する必要はありません。jQuery は、ある意味ですべてのタグを「閉じます」。li要素をulではなくに追加する必要があります.img_gallery。最後に追加するだけulです：

var hrefs = $.makeArray(jQuery('ul.js a'))

$('#load_more').bind('click',function(){
    $('.img_gallery').append('<ul>');

    for(var c = 0; c < 4; c++){
        if((hrefs.length) > 0){
            $('<li>').append($('<img>', {
                src: $(hrefs[0]).attr('href'); // get the link reference from the element
            })).appendTo($('.img_gallery ul').last());  // append to the last ul, not .img_gallery
            hrefs.splice(0,1);
        }
    }
});

または、ul変数として保持し、をli追加して、ループの後にリストを追加できます。

var hrefs = $.makeArray(jQuery('ul.js a'))

$('#load_more').bind('click',function(){
    var newul = $('<ul>');  // Makes an element, not a tag

    for(var c = 0; c < 4; c++){
        if((hrefs.length) > 0){
            $('<li>').append($('<img>', {
                src: $(hrefs[0]).attr('href'); // get the link reference from the element
            })).appendTo(newul);  // append to the ul you created
            hrefs.splice(0,1);
        }
    }

    $('.img_gallery').append(newul);
});
于 2012-10-08T17:24:23.093 に答える