只顯示前5列與多列顯示更多按鈕使用JQuery

如何使用JQuery僅顯示每列的前5次&「更多」&「更少」鏈接顯示更多結果。只顯示前5列與多列顯示更多按鈕使用JQuery

我是誰後，在類似於hide all li elements and show the first 2 and toggle them by button - 但我需要更多的&環節少，顯示/隱藏所有每個醫生的時隙（即：增加/減少環節應顯示/隱藏所有的時間在點擊每個醫生7欄）。

- 這是什麼時代當前的顯示LIKE--

- 這是我要找FOR--

的結果 - 我的HTML代碼 -

<div class="appointmentDetails"> 
    <div class="staffInfo"> 
    <div>Dr John Doe</div> 
    </div> 
    <div class="appointmentInfo"> 
    <ul> 
     <li> 
     <div></div> 
     </li> 
     <li class="timeSlots bg"> 
     <div><a href="#">08:00</a></div> 
     <div><a href="#">09:00</a></div> 
     <div><a href="#">10:00</a></div> 
     <div><a href="#">11:00</a></div> 
     <div><a href="#">12:00</a></div> 
     <div><a href="#">13:00</a></div> 
     <div><a href="#">14:00</a></div> 
     <div><a href="#">15:00</a></div> 
     <div><a href="#">16:00</a></div> 
     <div><a href="#">17:00</a></div> 
     <div><a href="#">18:00</a></div> 
     </li> 
     <li class="timeSlots"> 
     <div><a href="#">08:00</a></div> 
     <div><a href="#">09:00</a></div> 
     <div><a href="#">10:00</a></div> 
     <div><a href="#">11:00</a></div> 
     <div><a href="#">12:00</a></div> 
     <div><a href="#">13:00</a></div> 
     <div><a href="#">14:00</a></div> 
     <div><a href="#">15:00</a></div> 
     <div><a href="#">16:00</a></div> 
     <div><a href="#">17:00</a></div> 
     <div><a href="#">18:00</a></div> 
     </li> 
     <li class="timeSlots bg"> 
     <div><a href="#">08:00</a></div> 
     <div><a href="#">09:00</a></div> 
     <div><a href="#">10:00</a></div> 
     <div><a href="#">11:00</a></div> 
     <div><a href="#">12:00</a></div> 
     <div><a href="#">13:00</a></div> 
     <div><a href="#">14:00</a></div> 
     <div><a href="#">15:00</a></div> 
     <div><a href="#">16:00</a></div> 
     <div><a href="#">17:00</a></div> 
     <div><a href="#">18:00</a></div> 
     </li> 
     <li class="timeSlots"> 
     <div><a href="#">08:00</a></div> 
     </li> 
     <li class="timeSlots bg"> 
     <div><a href="#">09:00</a></div> 
     </li> 
     <li class="timeSlots"> 
     <div><a href="#">09:00</a></div> 
     </li> 
     <li class="timeSlots bg"> 
     <div><a href="#">08:00</a></div> 
     </li> 
     <li> 
     <div></div> 
     </li> 
    </ul> 
    </div> 
</div> 
<div class="appointmentDetails"> 
    <div class="staffInfo"> 
    <div>Dr Tom Smith</div> 
    </div> 
    <div class="appointmentInfo"> 
    <ul> 
     <li> 
     <div></div> 
     </li> 
     <li class="timeSlots bg"> 
     <div><a href="#">08:00</a></div> 
     <div><a href="#">09:00</a></div> 
     <div><a href="#">10:00</a></div> 
     <div><a href="#">11:00</a></div> 
     <div><a href="#">12:00</a></div> 
     <div><a href="#">13:00</a></div> 
     <div><a href="#">14:00</a></div> 
     <div><a href="#">15:00</a></div> 
     <div><a href="#">16:00</a></div> 
     <div><a href="#">17:00</a></div> 
     <div><a href="#">18:00</a></div> 
     </li> 
     <li class="timeSlots"> 
     <div><a href="#">08:00</a></div> 
     <div><a href="#">09:00</a></div> 
     <div><a href="#">10:00</a></div> 
     <div><a href="#">11:00</a></div> 
     <div><a href="#">12:00</a></div> 
     </li> 
     <li class="timeSlots bg"> 
     <div><a href="#">10:00</a></div> 
     </li> 
     <li class="timeSlots"> 
     <div><a href="#">10:00</a></div> 
     </li> 
     <li class="timeSlots bg"> 
     <div><a href="#">10:00</a></div> 
     </li> 
     <li class="timeSlots"> 
     <div><a href="#">10:00</a></div> 
     </li> 
     <li class="timeSlots bg"> 
     <div><a href="#">10:00</a></div> 
     </li> 
     <li> 
     <div></div> 
     </li> 
    </ul> 
    </div> 
</div>

--HERE IS我的HTML/JAVASCRIPT/CSS--

http://jsfiddle.net/rR26n/

來源

2013-02-28 MWD

爲什麼只有一次（第4，第5，...）列有'+ More'鏈接？ – dfsq 2013-02-28 14:03:15

@dfsq - 沒有+少於5個項目的更多按鈕..我只是複製了代碼來生成示例:) – MWD 2013-02-28 14:07:01

善待和倒帶....等待，錯誤的域...哦，是啊，投票/反對/或選擇一個答案 – 2013-03-04 17:16:12

一個可能的解決方案現場演示：

$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(); 
});

剛上DOMready運行這段代碼。

http://jsfiddle.net/dfsq/rR26n/6/

來源

2013-02-28 14:12:13 dfsq

試試這個：

http://jsfiddle.net/rR26n/8

// hide all times and then show the first 5 
var hideTimes = function() { 
    $('.timeSlots').each(function() { 
     $(this).children('div').hide().filter(':lt(5)').show(); 
    }); 
} 

// show all times 
var showTimes = function() { 
    $('.timeSlots > div').show(); 
} 

$('.show').click(function() { 
    showTimes(); 
}); 

$('.hide').click(function() { 
    hideTimes(); 
}); 

hideTimes();

這裏有一個一鍵例如：http://jsfiddle.net/rR26n/9/

兩個例子都需要一點精煉，以防止作用於按鈕.appointmentDetails的所有實例。你可以用ID或類索引來做到這一點。

來源

2013-02-28 14:17:57 isherwood

在這裏你去： http://jsfiddle.net/eqmgy/

你需要在每個<li class="timeSlots"></li>

末和JS加

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

：

var showMore = function() { 
    $(this).find('div').css('display', 'block'); 

    $(this).find('.more').css('display', 'none'); 
    $(this).find('.less').css('display', 'block'); 
    $(this).find('.less').click($.proxy(showLess, $(this))); 

}; 

var showLess = function() { 
    $(this).find('div').each(function(index, div) { 
     if(index > 5) { 
      $(div).css('display', 'none'); 
     } 
    }); 

    $(this).find('.less').css('display', 'none'); 
    $(this).find('.more').css('display', 'block'); 

    $(this).find('.more').click($.proxy(showMore, $(this))); 

}; 

$('.timeSlots').each(function (index, timeslot) { 
    $.proxy(showLess, timeslot)(); 
});

編輯：

讓我們增加了更多/更少自動代替，所以也沒有鞋了，當數< 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)(); 
      } 
});

來源

2013-02-28 14:30:04

之前，我們得到的「解決方案」：您的標記是不是很語義。你正在顯示一個時間列表，所以時間應該在列表中，而不是DIV。這些列表可以左移或內聯，也可以在標記中刪除大量的內容。

假設你現在有你的時間在列表中，像這樣：

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

你想要做的幾件事情：＃5後

如果列表已經超過5個插槽，隱藏的一切並添加更多鏈接。
當點擊一個更多鏈接，顯示＃5之後的一切，並更改爲內容鏈接
當點擊一個內容鏈接，隱藏＃5之後的一切，變回一個更鏈路

如果你還沒有使用jQuery，我會建議你使用jQuery，因爲它使事情變得更加容易，所以我對如何去做這些事情的建議使用它。

對於數字1，你可以隱藏在一定指數後的元素，像這樣：

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

這將隱藏在第5和其他元素。但是：這將隱藏全部其他列表的LI也是如此，因爲上面的代碼將每個列表中的所有子代碼放在一個大集合中，然後在第5個元素後面隱藏它們。所以你想要做的是迭代每個列表並隱藏它的子項。

我創造了這樣一個例子這裏，把他們的紅色，而不是隱藏它們，所以你可以直觀地看到正在發生的事情：

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

你可以看到它在這裏的行動：http://jsfiddle.net/7PeVj/

對於＃2，你需要檢查每個列表是否超過5個，並添加更多鏈接。由於我們已經遍歷每個列表，我們可以在那裏實現那個代碼。您可以使用兒童結果的長度來查看您是否超過5，然後使用jQuery的append()函數添加按鈕。

下面是一個例子。請注意，現在我們只是要求孩子是timeSlots

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

工作例如：你需要「掛鉤」 http://jsfiddle.net/7PeVj/2/

末的增加/減少隱藏和顯示適當的項目。您需要使用jQuery的on()來爲這些按鈕附加處理程序，因爲它們在頁面加載時不會存在。

再次，例如工作在：http://jsfiddle.net/7PeVj/4/

的隱藏和顯示您可以使用您在上面的代碼中看到了什麼事。您可以檢查並設置MORE列表項目的text()以在LESS和MORE之間來回切換，並根據需要隱藏顯示。

來源

2013-02-28 15:07:08 veddermatic

如果你發現有幫助的答案中的東西，請接受或upvote。 – isherwood 2013-03-01 15:23:00

只顯示前5列與多列顯示更多按鈕使用JQuery

回答

相關問題