javascript - Hide div's 5 to 7 if less then 8 div's

Bear with me on this. I have a loop in Wordpress that shows 8 posts per page. But sometimes the loop doesn't have 8 posts. If that happens I would like to hide div 5 to 7. And if there are 8 posts per page (8 div's) that show all 8 posts.

So let's say I have the following 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>

Than It will only show post 1 to 4 and NOT post 5 to 7. But if I have the following 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>

It will show all posts...

I have been experimenting with lenght but I'm quite new to jQuery. I've got this: console.log( $('.post').length);. This shows 6 so I figure that I need to do something with

if .post < 8 != < 4 addClass 'hide'

So I can hide them?? Or something like that?

So let's say I have the following 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>

Than It will only show post 1 to 4 and NOT post 5 to 7. But if I have the following 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>

It will show all posts...

I have been experimenting with lenght but I'm quite new to jQuery. I've got this: console.log( $('.post').length);. This shows 6 so I figure that I need to do something with

if .post < 8 != < 4 addClass 'hide'

So I can hide them?? Or something like that?

Share Improve this question asked Aug 11, 2017 at 9:29 Jay-oh 4562 gold badges8 silver badges30 bronze badges

Just a side question: would modifying the loop in wordpress (I guess some php) not an option? If you do this on the server you would prevent eventual screen flashes and save client-side processing time. If you however need to have all divs in the DOM (for eventual later use) - yes this can't be used. – Samuil Petrov Commented Aug 11, 2017 at 9:37
1 Great suggestion but I do need the divs for later use :) – Jay-oh Commented Aug 11, 2017 at 9:39

Add a ment |

5 Answers 5

Sorted by: Reset to default 6

You can check length and hide posts that are :gt(3) DEMO

if($('.post').length < 8) $('.post:gt(3)').hide()

I would use some kind of flag to mark the two different states and than use CSS for hiding. Example:

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./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>

See https://caniuse./#feat=css-sel3 for browser patibility.

You can check the length of the collection and then do the desired action.

In this case, we are using the jQuery.filter to filter the posts and select only those that have an index, greater than 3. The filter uses the :gt selector

var $post = jQuery(".post");
if($post.length < 8){
    $post.filter("gt:(3)").hide();
}

In case you wonder, the number is 3, because it is an index, which starts at zero (0). Then we are counting one by one and the 4th element is with index 3. So, the filter will select all elements with an index, greater than 3 (all elements which are not the first 4 elements) - in other words, the 5th element and all the others after that.

You can do this simply just with CSS.

.post:nth-child(n+4):not(:nth-last-child(n+5)) ~ .post {
  display: none;
}

It hides all posts after the fourth if the fourth isn't also fifth from the end (which means there's 8 elements total). It's simple, clean, and doesn't require any imperative shenanigans.

Solution inspired by this post.

Use each() method, within it write if statement for index > then you need

$(document).ready(function(){
        var length =$('.post').length;
        if(length < 8 && length > 4 ){
           $('.post').each(function(i,elem){
            if(i>=4){
              $(elem).hide();
              }
           })
      }
    });

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Hide div's 5 to 7 if less then 8 div's - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)