0

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

谢谢 ： ）

4

3 回答 3

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的 's 并在循环后附加列表：

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 回答
0

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