Question

我的页面顶部有一组5个日历图块。每个磁贴包含一个无序列表，其中包含不等数量的li标签，因为每天都有不同数量的事件。我在每个图块中只显示5个事件，如果有超过5个带有标签的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在每个tile上显示6个列表项，5个事件和click标签

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

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

Answer 1

答案是切片是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
            }
        });

无法使用jquery显示列表项的子集

1 个答案: