скрыть другие деления в приращении - PullRequest
Новая
       7

скрыть другие деления в приращении

0 голосов
/ 01 мая 2018

У меня есть родительский div с несколькими дочерними divами. Если внутри родителя 5 делений, мне нужно показать все 5 делений. Если есть 6 делений, 6-й должен быть скрыт, все 1-5 делений должны оставаться видимыми. Если есть 10 делений, все 10 должны быть видны, но если есть 11 делений или 12, 13 или 14, 11-й, 12-й, 13-й и 14-й деления должны быть скрыты и так далее. Дивы будут видны только если они достигнут 5, 10, 15 и так далее. Мой вопрос: возможно ли это сделать с помощью 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>

Ответы [ 2 ]

0 голосов
/ 02 мая 2018

Вы можете сделать несколько вложенных циклов и сравнить каждый индекс div с отсечкой: 

$('.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/

РЕДАКТИРОВАТЬ: Хотя мой оригинальный пост работал для вашего примера, в противном случае он потерпел бы неудачу. Предположим, я тоже могу это немного объяснить.

$('.parents').each() - проходит через каждый div с классом родителя

$(this).children('div') - находит все дочерние элементы div внутри этого родителя. вы можете использовать .find(), но это возвращает все дочерние элементы div, которые сломаются, если вы вложите больше элементов div

Math.floor($divs.length / 5) - подсчитать, сколько раз 5 входит в число делений

* 5 - умножить на 5, если их больше 5 дел.

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

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

0 голосов
/ 02 мая 2018 

$('.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>
...