来自数组/循环的 jQuery/JS 输出

Question

我在一个页面上有几个链接，它们用 jQuery 变成了一个数组。基本上，当用户在页面上单击“加载更多”时，我想生成一个<ul>，里面有 4 个图像（如果没有剩余 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

当您使用 jQuery 时，您不是在附加 html tags，而是在附加 html elements。

当您执行$('.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 2

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

Answer 3

试试这个方法..这样更干净

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