从第 n 个孩子计数中排除 display:none div答案

【问题标题】：Exclude display:none div from nth child count从第 n 个孩子计数中排除 display:none div
【发布时间】：2021-10-12 13:12:12
【问题描述】：

我有一个在 Bootstrap 4 中创建的列表组

HTML

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

CSS

.list-group-item:first-child {
 border-top-left-radius: 0.8rem;
 border-top-right-radius: 0.8rem;
}

.list-group-item:last-child {
 border-bottom-left-radius: 0.8rem;
 border-bottom-right-radius: 0.8rem;
}

我有一个简单的脚本，可以向此列表的元素添加或删除“d-none”类，问题是列表组的边框半径 CSS 也计算具有 d-none 类的元素。

这样，底部的角永远不会被 CSS 弄圆，因为它甚至会考虑到具有 display:none 属性的后续子元素。

第 3 行和第 4 行用 .d-none 隐藏。我需要第 2 行的底角被 CSS 舍入，因为它是最后一个可见的孩子。

有没有办法使用 javascript 临时删除节点，以便它们不计入 CSS？

【问题讨论】：

为什么不把radius放在parent上，隐藏overflow呢？
发生了其他事情，您的代码运行良好。 jsfiddle.net/qks7tvdz
父级仍然计算隐藏元素，因此它看起来比我在 isspector 中突出显示它时更长。引导 CSS 应用于单个元素的半径。
@vanowm 隐藏顶部和底部的孩子，你会看到问题
@charlietfl 现在我明白了。我想在不涉及 javascript 的情况下，您唯一的选择是对父元素进行圆角处理。

标签： javascript jquery css bootstrap-4

【解决方案1】：

一种方法是使用类作为半径，每当您更改列表中项目的显示时，重置列表中第一个和最后一个可见元素的类

const $list = $('.list-group');


function toggleFirstLast($list){
   const $items = $list.children().removeClass('first-visible last-visible')
   
   $items.filter(':visible:first').addClass('first-visible');
   $items.filter(':visible:last').addClass('last-visible')

}


toggleFirstLast($list)

.list-group-item {border:2px solid green; list-style-type:none}

.list-group-item.first-visible {
 border-top-left-radius: 0.8rem;
 border-top-right-radius: 0.8rem;
}

.list-group-item.last-visible {
 border-bottom-left-radius: 0.8rem;
 border-bottom-right-radius: 0.8rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-group">
  <li class="list-group-item first-visible" style="display:none">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item"  style="display:none">Morbi leo risus</li>
  <li class="list-group-item" style="display:none">Porta ac consectetur ac</li>
  <li class="list-group-item last-visible">Vestibulum at eros</li>
</ul>

【讨论】：