基于jQuery实现ul列表按需加载：点击按钮显示下2个元素

嘿，这就帮你搞定这个“加载更多”的逻辑！我们只需要在点击事件里精准定位要显示的元素就行，直接看完整代码吧：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<button id="add_more">Add next 2</button>
<ul>
<li class="show">1</li>
<li class="show">2</li>
<li class="hide">3</li>
<li class="hide">4</li>
<li class="hide">5</li>
<li class="hide">6</li>
<!-- Other elements -->
<li class="hide">n</li>
</ul>

<script>
$(function() {
  // 页面加载时隐藏所有带hide类的元素
  $('.hide').hide(); 
  
  $('#add_more').on('click', function() {
    // 选取当前隐藏的前2个元素，显示它们并移除hide类（避免重复选中）
    $('.hide').slice(0, 2).show().removeClass('hide');
    
    // 可选优化：如果没有更多元素可显示，禁用按钮并提示
    if ($('.hide').length === 0) {
      $(this).prop('disabled', true).text('No more items');
    }
  });
});
</script>

逻辑拆解： #

• $('.hide').slice(0, 2)：这个方法会从所有带hide类的元素里截取前2个，完美实现“依次显示接下来2个”的核心需求；
• .show().removeClass('hide')：显示元素的同时移除hide类，确保下次点击时不会重复选中已经显示的元素；
• 最后的判断是个实用小优化——当所有隐藏元素都展示完后，禁用按钮并修改文字，给用户明确的反馈，提升交互体验。

内容的提问来源于stack exchange，提问作者rahul.m