无法使用jquery显示列表项的子集[重复]答案

【问题标题】：cant display subset of list items using jquery [duplicate]无法使用jquery显示列表项的子集[重复]
【发布时间】：2013-10-28 17:44:31
【问题描述】：

我的页面顶部有一组 5 个日历图块。每个图块都包含一个无序列表，其中包含不等数量的 li 标签，因为每天都有不同数量的事件。我在每个图块中仅显示 5 个事件，如果有超过 5 个带有 a 标签的 li 标签，请单击以显示接下来的 5 li 项目。瓦片呈现如下；

<div id="day1">
        <span id="lblDay1" class="calendartilelabel">10/9/2013</span>
        <hr class="calendartileline" />
        <ul id="FeaturedContent_day1List" class="calendartile">
    <li class='eventitem'>10:30 DOE U.S. Gasoline </li>
    <li class='eventitem'>10:30 DOE U.S. Distillat</li>
    <li class='eventitem'>10:30 DOE U.S. Crude Oil</li>
    <li class='eventitem'>10:30 DOE Cushing OK Cru</li>
    <li class='eventitem'>10:30 DOE U.S. Refinery </li>
    <li class='next'><a href='#'>Next--></a></li>
    <li class='eventitem'>Nov Corn Options Expiration</li>
    <li class='eventitem'>Nov Wheat Options Expiration</li>
    <li class='eventitem'>Nov Soybeans Options Expiration</li>
            <li class='eventitem'>Nov Sugar Options Expiration</li>
    <li class='eventitem'>Nov Cocoa Options Expiration</li>
            <li class='next'><a href='#'>Next--></a><a href='#'>Prev--></a></li>
    <li class='eventitem'>Nov Coffee Options Expiration</li>
    <li class='next'><a href='#'>Prev--></a></li>
    </ul>
    </div>

我使用这个 jquery 在每个图块上显示 6 个列表项、5 个事件和点击标签

 function showCalendarTiles() {
            $("ul.calendartile").each(function () {
                $("li:gt(5)", this).hide();
            });               
        }

如何删除标签点击事件上显示的 5 个项目并显示下 x 个项目？

【问题讨论】：

不相似，因为我需要根据单击的下一个或上一个来更改列表项，因此代码必须跟踪下一个和以前的内容，最好通过索引
如果您跟踪当前索引，那么您只需从该值中添加或减去一个固定数字即可切换到上一个/下一个 - 问题出在哪里？
这就是问题所在，我一直在试图弄清楚如何获取 cliked ul 中的项目数，但我尝试的任何方法都不起作用，而且我对 jquery 相对较新，不知道如何获取点击标签的索引
api.jquery.com/index
我现在可以获取列表的索引，但我无法获取长度，这应该可以工作但不会提醒（$(this).parents("li").length());跨度>

标签： jquery

【解决方案1】：

答案是 slice 是 jquery 2.0 及更高版本中实现我正在寻找的结果的最佳方法，如下所示。（感谢 CBroe）

 var priorIndex = 0;
 var numberOfItemsToDisplay = 22;

$("ul.updownsymbols > li > a").on("click", function () {
            var currentIndex = $(this).parent().index();
            var liTags = $(this).parent().parent().children();
            if ($(this).text() == "Next-->") {
                liTags.slice(0, currentIndex + 1).hide();
                liTags.slice(currentIndex + 1, currentIndex + (numberOfItemsToDisplay + 1)).show();
                priorIndex = currentIndex;
            } else if ($(this).text().match('<--Prev'))  {
                liTags.slice(priorIndex + 1, currentIndex + 1).hide();
                liTags.slice(priorIndex - (numberOfItemsToDisplay - 1), priorIndex + 1).show();
                priorIndex = priorIndex - numberOfItemsToDisplay;
            } else {
                $("#lblChartSymbol").text($(this).text());

                //make ajax call to get the chart data
            }
        });

【讨论】：