如果小於8 div，則隱藏div的5到7
[英]Hide div's 5 to 7 if less then 8 div's
問題描述
忍受我。 我在Wordpress中有一個循環，每頁顯示8個帖子。 但是有時循環中沒有8個帖子。 如果發生這種情況，我想將第5格hide到第7格。並且如果每頁有8個帖子（8個div）顯示所有8個帖子。
假設我有以下HTML
<div class="post">Post 1</div>
<div class="post">Post 2</div>
<div class="post">Post 3</div>
<div class="post">Post 4</div>
<div class="post">Post 5</div>
<div class="post">Post 6</div>
<div class="post">Post 7</div>
它將僅顯示第1至4個帖子，而不顯示5至7個帖子。但是，如果我具有以下HTML：
<div class="post">Post 1</div>
<div class="post">Post 2</div>
<div class="post">Post 3</div>
<div class="post">Post 4</div>
<div class="post">Post 5</div>
<div class="post">Post 6</div>
<div class="post">Post 7</div>
<div class="post">Post 8</div>
它將顯示所有帖子...
我一直在嘗試進行lenght測試，但對於jQuery我還是很陌生。 我有這個： console.log( $('.post').length); 。 這顯示6所以我認為我需要做一些事情
if .post < 8 != < 4 addClass 'hide'
這樣我可以藏起來嗎？ 或類似的東西？
5 個解決方案
解決方案1
3 已采納 2017-08-11 09:32:38
您可以檢查長度並hide :gt(3) DEMO的帖子
if($('.post').length < 8) $('.post:gt(3)').hide()
解決方案2
2 2017-08-11 09:49:51
我將使用某種標志來標記兩個不同的狀態，而不是使用CSS進行隱藏。 例：
function check($container) { if($container.find('> .post').length < 8) { $container.addClass('reduced'); } } check(jQuery('#test1')); check(jQuery('#test2'));
#test1 { background: blue; } #test2 { background: red; } .reduced .post:nth-child(1n+5){ display: none; }
<!DOCTYPE html> <html> <head> <title>demo</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div id="test1"> <div class="post">1</div> <div class="post">2</div> <div class="post">3</div> <div class="post">4</div> <div class="post">5</div> <div class="post">6</div> <div class="post">7</div> <div class="post">8</div> </div> <div id="test2"> <div class="post">1</div> <div class="post">2</div> <div class="post">3</div> <div class="post">4</div> <div class="post">5</div> <div class="post">6</div> <div class="post">7</div> </div> </body> </html>
有關瀏覽器兼容性，請參見https://caniuse.com/#feat=css-sel3 。
解決方案3
1 2017-08-11 09:38:35
您可以檢查集合的長度，然后執行所需的操作。
在這種情況下，我們使用jQuery.filter過濾帖子並僅選擇索引大於3的帖子。過濾器使用：gt選擇器
var $post = jQuery(".post");
if($post.length < 8){
$post.filter("gt:(3)").hide();
}
如果您想知道，數字是3，因為它是一個從零（0）開始的索引。 然后我們一個接一個地計數，第四個元素的索引為3。因此，過濾器將選擇索引大於3的所有元素（不是前4個元素的所有元素）-換句話說，第5個元素然后所有其他的
解決方案4
0 2017-08-11 10:11:08
您只需使用CSS即可完成此操作。
.post:nth-child(n+4):not(:nth-last-child(n+5)) ~ .post {
display: none;
}
如果第四個末尾也不是第五個末尾（這意味着總共有8個元素），它將隱藏第四個末尾的所有帖子。 它簡單，干凈，並且不需要任何命令性的惡作劇。
解決方案受此職位啟發。
解決方案5
0 2017-08-11 10:16:54
使用each（）方法，在其中寫入索引>的if語句，那么您需要
$(document).ready(function(){
var length =$('.post').length;
if(length < 8 && length > 4 ){
$('.post').each(function(i,elem){
if(i>=4){
$(elem).hide();
}
})
}
});
顯示/隱藏潛水員DIV的潛水員
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.