使用JQuery通过“显示更多”按钮仅显示跨多个列的前5个div

如何使用JQuery在每列上只显示前5次&使用“更多”和“更少”链接显示更多结果

我所追求的是类似于-但我需要更多和更少的链接来显示/隐藏每个医生的所有时间段（即：更多/更少的链接应该显示/隐藏每个医生的7列的所有时间，只需单击一次）

--这就是《泰晤士报》目前的样子--

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

--我的HTML代码--

无名氏博士




















汤姆史密斯博士

--这里是我的HTML/JAVASCRIPT/CSS的现场演示--

一种可能的解决方案：

$timeSlots = $('.timeSlots');
$timeSlots.each(function() {
    var $times = $(this).children();
    if ($times.length > 5) {
        $timeSlots.children(':nth-of-type(n+6)').hide();
        $(this).append('<span class="more-times">+More</span>');
    }
});

$timeSlots.on('click', '.more-times', function() {
    $(this).prevAll().show().end().remove();
});

$timeSlots=$（'.timeSlots'）；
$timeSlots.each（函数（）{
var$times=$（this.children（）；
如果（$times.length>5）{
$timeSlots.children（“：第n个类型（n+6）”）.hide（）；
$（this.append（“+More”）；
}
});
$timeSlots.on（'click'，'more times'，function（）{
$（this.prevAll（）.show（）.end（）.remove（）；
});

只需在

DOMready

上运行此代码

试试这个：

下面是一个单键示例：

这两个示例都需要一些改进，以防止按钮作用于.appointmentDetails的所有实例。您可以使用ID或通过类索引来实现这一点

给你：

您需要添加

            <div class="less"><a href="#">Less</a>
            </div>
            <div class="more"><a href="#">More</a>
            </div>

编辑：

让我们自动添加更多/更少，这样当数字小于5时，它就不会出现问题：

$('.timeSlots').each(function (index, timeslot) {
            if(timeslot.find('div').length > 5) {
                 timeslot.append('<div class="more"><a href="#">More</a></div>');
                 timeslot.append('<div class="less"><a href="#">Less</a></div>');
                 $.proxy(showLess, timeslot)();
            }
});

$（'.timeslot'）。每个（函数（索引，时隙）{
if（时隙查找（'div'）。长度>5）{
时隙。追加（“”）；
时隙。追加（“”）；
$.proxy（无显示，时隙）（）；
}
});

在我们讨论“解决方案”之前：您的标记没有很好的语义。您正在显示一个时间列表，因此时间应该在列表中，而不是div中。这些列表可以向左浮动，也可以内联阻止，这样就可以去掉标记中的许多污点

假设您现在的时间列表如下：

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

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

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

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

你可以在这里看到它的作用：

对于#2，您需要检查每个列表是否超过5个，并添加更多链接。因为我们已经在迭代每个列表，所以我们可以在那里实现该代码。您可以使用子结果的长度查看是否超过5，然后使用jQuery的

append（）

函数添加按钮

这里有一个例子。请注意，我们现在只要求孩子是

时隙

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

jQuery（“.timeList”）。每个（函数（）{
//参考清单
var theList=jQuery（this）；
//引用具有.timeSlot的是LIs
var kids=list.children（“.timeSlot”）；
//在元素5之后操作
kids.filter（“：gt（4）”）.css（'color'，'red'）；
//如果我们有超过5个链接，请添加更多链接
如果（长度>5）{
附加（'li class=“slotMoreLess”>MORE'）；
}
});

工作示例：

最后，您需要“连接”更多/更少以适当地隐藏和显示项目。您需要使用jQuery的

on（）

为这些按钮附加处理程序，因为它们在页面加载时不存在

同样，工作示例如下：

---

隐藏和显示可以使用上面代码中看到的内容来完成。您可以检查和设置“更多”列表项的

text（）

，以便在“更少”和“更多”之间来回切换，并根据需要隐藏“显示”。

以及为什么只有一次（第四、第五、第……次）的列有

+MORE

链接？@dfsq-不必为少于5项的列设置+MORE按钮。。我只是复制了代码来生成示例：）是善良的，然后重新绕。。。。等等，错域了。。。哦，是的，投赞成票/投反对票/或选择一个答案如果你在答案中发现一些有用的东西，请接受或投赞成票。

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

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

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

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