Question

我有一个父div，它有多个子div。如果父母中有5个div，我需要显示所有5个div。如果有6个div，则应隐藏第6个div，所有1-5个div仍应保持可见。如果有10个div，则所有10个都应该可见，但如果有11个div或12个，13个或14个，则应隐藏第11个12th 13th和14th div，依此类推。 div只有在达到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>

Answer 1

＆＃13;

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

＆＃13;

.parent {
  border: 2px solid black
}

＆＃13;

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

＆＃13;

Answer 2

您可以执行一些嵌套循环并将每个divs索引与截止值进行比较：

$('.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进入div数量的次数

* 5 - 如果超过5个div，则乘以5

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

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

以增量隐藏其他div

2 个答案: