jquery - 将列表中的前 10 个项目转换为图像，然后使用 jQuery 在单击时转换后续组

Question

我正在将锚点转换为图像，将它们按顺序淡入页面，然后从页面中删除锚点（和 parent li）。

我想加载列表中的前 10 个项目，然后通过单击加载更多按钮加载额外的 10 个组。不太确定最好的方法是什么。

标记如下，一切正常。

HTML：

<section class="userGallery headers">
  <ul>    
    <li>
      <a href="path/to/image.jpg" title="image_name"></a>
    </li>    
    <li>
      <a href="path/to/image.jpg" title="image_name"></a>
    </li>
  </ul>
</section>

进入：

<section class="userGallery headers">
  <ul>    
  </ul>
  <img class="user" src"path/to/image.jpg" alt="image_name" />
  <img class="user" src"path/to/image.jpg" alt="image_name" />
</section>

JavaScript：

$(window).load(function(){

// User Uploads

    $('.userGallery li').each(function(){
        var loc = $(this).find('a').attr('href'),
            img = $('.userGallery').append($('<img/>', { class: 'user', src: loc }));

        $(this).remove();

        setTimeout(function(){
            $('.user').animate({ opacity:1 },400);
        }, 100);
    });

});

Answer 1

你想要这样的东西吗？

<a href="#" id="load10more">load 10 more</a>

$("#load10more").click(function(event) {
  event.preventDefault();
   for(i=0;i<10;i++)
   {
     $("ul").append.('<li><a href="path/to/image_' + i + '.jpg" title="image_name"></a></li>');
   }
});