如果存在多个数量，则隐藏列表项

时间：2019-02-21 17:16:57

标签： javascript jquery css 

<ul class="parent">
  <li class="children">1</li>
  <li class="children">2</li>
  <li class="children">3</li>
  <li class="children">4</li>
  <li class="children">5</li>
  <li class="children">6</li>
  <li class="children">7</li>
  <li class="children">8</li>
  <li class="children">9</li>
</ul>
<ul class="parent">
  <li class="children">1</li>
  <li class="children">2</li>
  <li class="children">3</li>
  <li class="children">4</li>
  <li class="children">5</li>
  <li class="children">6</li>
  <li class="children">7</li>
  <li class="children">8</li>
  <li class="children">9</li>
</ul>
<ul class="parent">
  <li class="children">1</li>
  <li class="children">2</li>
  <li class="children">3</li>
  <li class="children">4</li>
  <li class="children">5</li>
  <li class="children">6</li>
  <li class="children">7</li>
  <li class="children">8</li>
  <li class="children">9</li>
</ul>

我想要的是每个<ul class="parent">中的/：

如果计数为：3 > li <=6将<li>隐藏在3以上。如果计数为6 > li <=9，我们将<li>隐藏在6以上。

事实上，我有一排元素。我总是要每行显示3个元素，但是当最后一行少于3个元素时，我想完全隐藏此行。

此外，根据浏览器的大小（这似乎很简单），我想将因子数更改为每行4个元素。

在纯CSS中这似乎是不可能的，所以我转向JS。

3 个答案:

答案 0 :(得分：4)

  

在纯CSS中这似乎是不可能的

接受挑战。

诀窍是级联nth的计数，但前提是它离上一个孩子x不远。免责声明，我有点“作弊”以排除诸如:not(:nth-child(5))之类的某些元素，但这具有不使用诸如!important

之类的优点。 

.parent li:nth-child(n+4):nth-last-child(3):not(:nth-child(5)):not(:nth-child(6)) {
 display: none;
}
.parent li:nth-child(n+4):nth-last-child(-n+2):not(:nth-child(6)) {
 display: none;
}
.parent li:nth-child(n+4):nth-last-child(-n+1) {
 display: none;
}
.parent li:nth-child(n+7) {
 display: none;
}




/* just for styling */
body{ 
  display: flex;
  flex-flow: row wrap;
}

ul:before {
 content: "I started with " attr(data-count) " li's";
 background-color: lightgrey;
}
<ul class="parent" data-count="3">
  <li class="children">1</li>
  <li class="children">2</li>
  <li class="children">3</li>
</ul>

<ul class="parent" data-count="4">
  <li class="children">1</li>
  <li class="children">2</li>
  <li class="children">3</li>
  <li class="children">4</li>
</ul>
<ul class="parent" data-count="5">
  <li class="children">1</li>
  <li class="children">2</li>
  <li class="children">3</li>
  <li class="children">4</li>
  <li class="children">5</li>
</ul>
<ul class="parent" data-count="6">
  <li class="children">1</li>
  <li class="children">2</li>
  <li class="children">3</li>
  <li class="children">4</li>
  <li class="children">5</li>
  <li class="children">6</li>
</ul>
<ul class="parent" data-count="7">
  <li class="children">1</li>
  <li class="children">2</li>
  <li class="children">3</li>
  <li class="children">4</li>
  <li class="children">5</li>
  <li class="children">6</li>
  <li class="children">7</li>
</ul>
<ul class="parent" data-count="8">
  <li class="children">1</li>
  <li class="children">2</li>
  <li class="children">3</li>
  <li class="children">4</li>
  <li class="children">5</li>
  <li class="children">6</li>
  <li class="children">7</li>
  <li class="children">8</li>
</ul>
<ul class="parent" data-count="9">
  <li class="children">1</li>
  <li class="children">2</li>
  <li class="children">3</li>
  <li class="children">4</li>
  <li class="children">5</li>
  <li class="children">6</li>
  <li class="children">7</li>
  <li class="children">8</li>
  <li class="children">9</li>
</ul>

通过您在OP中向许多问题提问的方式，我选择为我认为是您的问题优先级的问题提供解决方案。您可以进行相应的调整。

答案 1 :(得分：1)

使用Array＃forEach并访问ul的子级，您可以执行以下操作。

const uls = Array.from(document.getElementsByClassName("parent"));

const factor = 3;
const offset = 3;
uls.forEach(ul=>{
  const children = Array.from(ul.children);
  
  //if less than 3 hide everrything
  if(children.length < factor){
    children.forEach(li=>li.style.display = "none");
    return;
  }
 
  //default config to hide from 3 to 6
  let start = factor;
  let end   = factor + offset;
  //if length is greater than 6 and shorter than 9 hide those lis
  if(children.length > 6 && children.length <= 9){
    start = 6;
    end = 9;
  }
  
  children.slice(start, end).forEach(li=>li.style.display = "none");
  
});
body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
<ul class="parent">
  <li class="children">1</li>
  <li class="children">2</li>
  <li class="children">3</li>
  <li class="children">4</li>
  <li class="children">5</li>
  <li class="children">6</li>
</ul>
<ul class="parent">
  <li class="children">1</li>
  <li class="children">2</li>
  <li class="children">3</li>
  <li class="children">4</li>
  <li class="children">5</li>
  <li class="children">6</li>
  <li class="children">7</li>
  <li class="children">8</li>
  <li class="children">9</li>
</ul>
<ul class="parent">
  <li class="children">1</li>
  <li class="children">2</li>
  <li class="children">3</li>
</ul>
<ul class="parent">
  <li class="children">1</li>
  <li class="children">2</li>
  <li class="children">3</li>
  <li class="children">4</li>
  <li class="children">5</li>
  <li class="children">6</li>
  <li class="children">7</li>
  <li class="children">8</li>
  <li class="children">9</li>
  <li class="children">10</li>
</ul>
<ul class="parent">
  <li class="children">1</li>
  <li class="children">2</li>
</ul>

答案 2 :(得分：0)

基于@soulshined的答案，我能够做自己想要的事情。谢谢大家的友好回答。

如果宽度小于960，则每行仅允许3个项目，最多6个项目。如果第二行上的项目少于6个（第一行超过3个），则隐藏所有项目。

如果宽度大于960，则每行允许4个项目，最多8个项目。如果第二行上的项目少于8个（第一行中的项目大于4个），则隐藏所有项目。

代码：

@media screen and (max-width: 960px) {
  .product-sheet {
    width: calc((100% / 3) - 34px);
  }

  .product-list-tpl .product-sheet:nth-child(n + 7) {
    /* select all but the first 6 elements, allow 2 rows of 3 elements (3 X 2) and hide them */
    display: none;
  }

  .product-list-tpl
    .product-sheet:nth-child(n + 4):nth-last-child(-n
      + 2):not(:nth-child(5)):not(:nth-child(6)) {
    /* select all but the first 3 elements, so 4 and above and select the element before the last (last-1) of the list, so position 1 in second row / 4th item and hide it */
    background: red;
  }

  .product-list-tpl
    .product-sheet:nth-child(n + 4):nth-last-child(-n + 1):not(:nth-child(6)) {
    /* select all but the first 3 elements, so 4 and above and select the last element, so position 2 in second row / 5th item and hide it */
    background: purple;
  }
}

@media screen and (min-width: 960px) {
  .product-sheet {
    width: calc((100% / 4) - 34px);
  }

  .product-list-tpl .product-sheet:nth-child(n + 9) {
    /* select all but the first 8 elements, allow 2 rows of 4 elements (4 X 2) and hide them */
    display: none;
  }

  .product-list-tpl
    .product-sheet:nth-child(n + 5):nth-last-child(-n + 1):not(:nth-child(8)) {
    /* select all but the first 4 elements, so 5 and above and select the last element, so position 3 in second row / 7 th item and hide it */
    display: none;
  }

  .product-list-tpl
    .product-sheet:nth-child(n + 5):nth-last-child(-n
      + 2):not(:nth-child(7)):not(:nth-child(8)) {
    /* select all but the first 4 elements, so 5 and above and select the element before last element, so position 2 in second row / 6 th item and hide it */
    display: none;
  }

  .product-list-tpl
    .product-sheet:nth-child(n + 5):nth-last-child(-n
      + 3):not(:nth-child(6)):not(:nth-child(7)):not(:nth-child(8)) {
    /* select all but the first 4 elements, so 5 and above and select the last element, so position 1 in second row / 5 th item and hide it */
    display: none;
  }
}
相关问题
最新问题