CODEWITHSUNDEEP
jqueryhide
Caleb Maglunob
Caleb Maglunob

Reputation: 5

hide other divs in increment

I have a parent div that has multiple child divs. If there are 5 div inside the parent, I need to show all 5 div. If there are 6 divs, the 6th should be hidden, all 1-5 divs should still stay visible. If there are 10 divs all 10 should be visible but if there are 11 divs or 12, 13 or 14, the 11th 12th 13th and 14th div should be hidden and so on. The divs will only be visible if they reach 5, 10, 15 so on. My question is if it is possible to do that using jquery?

<div class="parent">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test2</div> <!-- this div should be hidden --->
</div>
<div class="parent">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test2</div> <!-- this div should be hidden --->
    <div>test2</div> <!-- this div should be hidden --->
</div>

Upvotes: 0

Views: 42

Answers (2)

poorly-written-code
poorly-written-code

Reputation: 1073

You could do some nested loops and compare each divs index to a cutoff:

$('.parent').each(function() {
    let $divs = $(this).children('div');

    $divs.each(function() {
        if ($(this).index() >= (Math.floor($divs.length / 5) * 5)) { 
          $(this).hide(); 
        }
    });
});

https://jsfiddle.net/mL43ojrj/

EDIT: Although my original post worked for your example, it would have failed otherwise. Suppose I can explain this a bit too.

$('.parents').each() - loops through each div with a class of parent

$(this).children('div') - finds all of the child divs within that parent. you could use .find(), but that returns all descendant divs, which would break if you nest more divs

Math.floor($divs.length / 5) - calculate how many times 5 goes into the number of divs

* 5 - multiply by 5 in case there are more than 5 div

https://api.jquery.com/children/

https://api.jquery.com/each/

Upvotes: 0

guradio
guradio

Reputation: 15565

$('.parent div').each(function() {
  $(this, '.parent').hide();//hide all div in parent class element
  $index = $(this).index() + 1;//get the index of current div
  $(this).text($index);//change div text to current index
  if ($index % 5 == 0) {//check index if divisible by 5
    $(this).next().prevAll().show();//get next div then show div that has index divisible by 5 and its previous div
  }


})
.parent {
  border: 2px solid black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test2</div>
  <!-- this div should be hidden --->
</div>
<div class="parent">
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test2</div>
  <!-- this div should be hidden --->
  <div>test2</div>
  <!-- this div should be hidden --->
</div>
<div class="parent">
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test2</div>
  <!-- this div should be hidden --->
  <div>test2</div>
  <!-- this div should be hidden --->
</div>

Upvotes: 1

Related Questions