Skip to main content
 首页 » 编程设计

jquery之使用 JQuery 仅显示多列中的前 5 个 div，并显示更多按钮

2026年07月24日10zdz8207

如何使用 JQuery 在每列上仅显示前 5 次，并使用“更多”和“更少”链接来显示更多结果。

我所追求的类似于 hide all li elements and show the first 2 and toggle them by button - 但我需要更多和更少的链接来显示/隐藏每个医生的所有时间段(即:更多/更少的链接应该一键显示/隐藏每个医生的 7 列中的所有时间)。

--这就是当前的情况--

--这就是我正在寻找的结果--

--我的 HTML 代码--

<div class="appointmentDetails"> 
  <div class="staffInfo"> 
    <div>Dr John Doe</div> 
  </div> 
  <div class="appointmentInfo"> 
    <ul> 
      <li> 
        <div></div> 
      </li> 
      <li class="timeSlots bg"> 
        <div><a href="#">08:00</a></div> 
        <div><a href="#">09:00</a></div> 
        <div><a href="#">10:00</a></div> 
        <div><a href="#">11:00</a></div> 
        <div><a href="#">12:00</a></div> 
        <div><a href="#">13:00</a></div> 
        <div><a href="#">14:00</a></div> 
        <div><a href="#">15:00</a></div> 
        <div><a href="#">16:00</a></div> 
        <div><a href="#">17:00</a></div> 
        <div><a href="#">18:00</a></div> 
      </li> 
      <li class="timeSlots"> 
        <div><a href="#">08:00</a></div> 
        <div><a href="#">09:00</a></div> 
        <div><a href="#">10:00</a></div> 
        <div><a href="#">11:00</a></div> 
        <div><a href="#">12:00</a></div> 
        <div><a href="#">13:00</a></div> 
        <div><a href="#">14:00</a></div> 
        <div><a href="#">15:00</a></div> 
        <div><a href="#">16:00</a></div> 
        <div><a href="#">17:00</a></div> 
        <div><a href="#">18:00</a></div> 
      </li> 
      <li class="timeSlots bg"> 
        <div><a href="#">08:00</a></div> 
        <div><a href="#">09:00</a></div> 
        <div><a href="#">10:00</a></div> 
        <div><a href="#">11:00</a></div> 
        <div><a href="#">12:00</a></div> 
        <div><a href="#">13:00</a></div> 
        <div><a href="#">14:00</a></div> 
        <div><a href="#">15:00</a></div> 
        <div><a href="#">16:00</a></div> 
        <div><a href="#">17:00</a></div> 
        <div><a href="#">18:00</a></div> 
      </li> 
      <li class="timeSlots"> 
        <div><a href="#">08:00</a></div> 
      </li> 
      <li class="timeSlots bg"> 
        <div><a href="#">09:00</a></div> 
      </li> 
      <li class="timeSlots"> 
        <div><a href="#">09:00</a></div> 
      </li> 
      <li class="timeSlots bg"> 
        <div><a href="#">08:00</a></div> 
      </li> 
      <li> 
        <div></div> 
      </li> 
    </ul> 
  </div> 
</div> 
<div class="appointmentDetails"> 
  <div class="staffInfo"> 
    <div>Dr Tom Smith</div> 
  </div> 
  <div class="appointmentInfo"> 
    <ul> 
      <li> 
        <div></div> 
      </li> 
      <li class="timeSlots bg"> 
        <div><a href="#">08:00</a></div> 
        <div><a href="#">09:00</a></div> 
        <div><a href="#">10:00</a></div> 
        <div><a href="#">11:00</a></div> 
        <div><a href="#">12:00</a></div> 
        <div><a href="#">13:00</a></div> 
        <div><a href="#">14:00</a></div> 
        <div><a href="#">15:00</a></div> 
        <div><a href="#">16:00</a></div> 
        <div><a href="#">17:00</a></div> 
        <div><a href="#">18:00</a></div> 
      </li> 
      <li class="timeSlots"> 
        <div><a href="#">08:00</a></div> 
        <div><a href="#">09:00</a></div> 
        <div><a href="#">10:00</a></div> 
        <div><a href="#">11:00</a></div> 
        <div><a href="#">12:00</a></div> 
      </li> 
      <li class="timeSlots bg"> 
        <div><a href="#">10:00</a></div> 
      </li> 
      <li class="timeSlots"> 
        <div><a href="#">10:00</a></div> 
      </li> 
      <li class="timeSlots bg"> 
        <div><a href="#">10:00</a></div> 
      </li> 
      <li class="timeSlots"> 
        <div><a href="#">10:00</a></div> 
      </li> 
      <li class="timeSlots bg"> 
        <div><a href="#">10:00</a></div> 
      </li> 
      <li> 
        <div></div> 
      </li> 
    </ul> 
  </div> 
</div>

--这是我的 HTML/JAVASCRIPT/CSS 的实时演示--

http://jsfiddle.net/rR26n/

请您参考如下方法:

在我们找到“解决方案”之前:您的标记不是很语义化。您正在显示时间列表，因此时间应该位于列表中，而不是 DIV 中。这些列表可以向左浮动或内联阻止，并且您可以消除标记中的大量内容。

假设您现在的时间如下所示:

<ul class="timeList"> 
   <li class="timeSlot">8:00</li> 
   <li class="timeSlot">9:00</li> 
   ... 
   <li class="timeSlot">18:00</li> 
</ul>

你想做一些事情:

  1. 如果列表的位置超过 5 个，请隐藏 #5 之后的所有内容，并添加“更多”链接。
  2. 点击 MORE 链接时，显示 #5 之后的所有内容，然后更改为 LESS 链接
  3. 点击 LESS 链接时，隐藏 #5 之后的所有内容并改回 MORE 链接

如果您还没有使用 jQuery，我建议您使用 jQuery，因为它使事情变得更加容易，因此我对如何进行这些操作的建议使用它。

对于数字 1，您可以隐藏某个索引之后的元素，如下所示:

       jQuery(".someClass").children(":gt(4)").hide();

这将隐藏第五个及更多元素。 但是:这也会隐藏其他列表的所有 LI，因为上面的代码将每个列表的所有子项放入一个大集合中，然后在第 5 个列表之后将它们全部隐藏元素。因此，您要做的就是迭代每个列表并仅隐藏其子列表。

我在这里创建了一个示例，将它们变成红色而不是隐藏它们，以便您可以直观地看到发生了什么:

jQuery(function () { 
    jQuery(".timeList").each(function () { 
        jQuery(this).children(":gt(4)").css('color','red'); 
    }); 
});

您可以在此处查看它的实际效果:http://jsfiddle.net/7PeVj/

对于#2，您需要检查每个列表是否超过 5 个，并添加一个“更多”链接。由于我们已经迭代了每个列表，因此我们可以在那里实现该代码。您可以使用子结果的长度来查看是否超过 5，然后使用 jQuery 的 append() 函数添加按钮。

这是一个例子。请注意，我们现在只要求 timeSlots 的子级 

    jQuery(".timeList").each(function () { 
        // reference to the list 
        var theList = jQuery(this); 
        // reference to it's LIs that have .timeSlot 
        var kids = theList.children(".timeSlot"); 
        // manipulate after element 5 
        kids.filter(":gt(4)").css('color','red'); 
        //add a MORE link if we have more than 5 
        if (kids.length > 5) { 
            theList.append('<li class="slotMoreLess">MORE</li>'); 
        } 
    });

工作示例:http://jsfiddle.net/7PeVj/2/

最后，您需要“连接”更多/更少以适本地隐藏和显示项目。您需要使用 jQuery 的 on() 来附加这些按钮的处理程序，因为它们在页面加载时不存在。

再次，工作示例位于:http://jsfiddle.net/7PeVj/4/

隐藏和显示可以使用上面代码中看到的内容来完成。您可以检查并设置 MORE 列表项的 text()，以在 LESS 和 MORE 之间来回切换，并根据需要隐藏显示。


  文章来源：
  https://blog.windname.com/post/aejdid2b1.html
阅读延展