CODEWITHSUNDEEP
javascriptjqueryhtml
Jay-oh
Jay-oh

Reputation: 456

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?

Upvotes: 3

Views: 925

Answers (5)

Alex
Alex

Reputation: 113

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

Upvotes: 0

hon2a
hon2a

Reputation: 7214

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.

Upvotes: 0

Nils R&#252;ckmann
Nils R&#252;ckmann

Reputation: 603

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

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

Upvotes: 2

thexpand
thexpand

Reputation: 641

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.

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122057

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

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

Upvotes: 6

Related Questions