0

我的页面顶部有一组 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 个项目？

4

1 回答 1

0

答案是 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
            }
        });
于 2013-10-28T09:44:31.333 回答