Question

我在页面上有几个链接，它们变成了一个带有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>')
        })

谢谢：）

Answer 1

尝试这种方法..这很清晰

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 )
})

Answer 2

当你使用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);
});

Answer 3

您的hrefs数组包含DOM元素，而不是URL。试试这个：

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'));
    };
};

jQuery / JS从数组/循环输出

3 个答案: