不能顯示使用jQuery的列表項的子集

我的頁面頂部有一組5個日曆圖塊。由於每天有不同數量的事件，因此每個圖塊都包含具有不等量li標籤的無序列表。我在每個圖塊中只顯示5個事件，並且如果有超過5個li標籤並且其中有一個標籤可以點擊以顯示下一個5 li項目。瓦片呈現如下;不能顯示使用jQuery的列表項的子集

<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件物品？

來源

2013-10-09 dinotom

不相似，因爲我需要在此基礎上，以改變列表項被點擊，一個或下一個，因此代碼必須優選地通過指數 – dinotom

如果您追蹤下一步是什麼，什麼是以前的，跟蹤當前的指數，那麼你只需要增加或減去該值的固定數字切換到上一個/下一個 - 問題在哪裏？ – CBroe

其中存在的問題是，我一直想弄清楚如何獲得cliked ul中的項目數，但沒有我嘗試工作，並且我相對較新的jquery，並且不知道如何獲取點擊標記的索引 – dinotom

答案是，切片是最好的方法在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-28 09:44:31 dinotom

不能顯示使用jQuery的列表項的子集

回答

相關問題