Question

给定一些元素（未知数），其中应隐藏一些元素：

<div id="root">
  <div>              1</div>
  <div class="hide"> 2</div>
  <div class="hide"> 3</div>
  <div class="hide"> 4</div>
  <div>              5</div>
  <div>              6</div>
  <div class="hide"> 7</div>
  <div>              8</div>
  <div class="hide"> 9</div>
  <div class="hide"> 10</div>
</div>

使用CSS（hide）隐藏带有.hide { display: none; }类的元素很容易。但是，我想要做的是用替换元素替换每个可隐藏元素范围，例如{{1或者更好<div>Some elements were hidden</div>其中<div>N elements hidden</div>是该隐藏元素范围内的元素数量（示例中三个范围的3,1和2）。这意味着最终输出看起来像是：

1,3隐藏的元素，5,6,1隐藏元素，8隐藏元素

第一：这可能只用CSS来实现吗？我想不出任何方式，但可能会有一些人比我选择更有创意：）

如果仅使用CSS无法解决这个问题，是否有办法通过在javascript + N / ::before psuedo-elements中添加类来实现此目的？即没有将任何元素插入“实际”DOM？

Answer 1

我个人会使用Javascript。但是，如果你真的只想坚持使用CSS，你可以通过一些技巧来实现它：

.hide {
 counter-increment: hiddenElements;
 visibility: hidden;
 font-size: 0px; 
}

counter-increment: hiddenElements;会自动增加每个隐藏元素的值。问题是这不适用于display：none;因此，我使用visibility: hidden;和font-size: 0px;作为解决方法来实现相同或足够接近。

.hide + div:not(.hide):before {
  content: counter(hiddenElements) " element(s) hidden \A";
  white-space: pre;
}

这篇文章描述了遇到隐藏元素后隐藏元素后隐藏的元素数量。这意味着应该始终存在最后一个（空？）<div></div>以确保激活。

.hide + div:not(.hide) + div {
  counter-reset: hiddenElements;
}

这会在写入元素数后重置div上的计数器。

您可以在下面看到演示。

＆＃13;

.hide {
 counter-increment: hiddenElements;
 visibility: hidden;
 font-size: 0px; 
}

.hide + div:not(.hide):before {
  content: counter(hiddenElements) " element(s) hidden \A";
  white-space: pre;
}

.hide + div:not(.hide) + div {
  counter-reset: hiddenElements;
}

＆＃13;

<div id="root">
  <div>              1</div>
  <div class="hide"> 2</div>
  <div class="hide"> 3</div>
  <div class="hide"> 4</div>
  <div>              5</div>
  <div>              6</div>
  <div class="hide"> 7</div>
  <div>              8</div>
  <div class="hide"> 9</div>
  <div class="hide"> 10</div>
  <div></div>
</div>

＆＃13;

如您所见，它有效，但它有许多小问题＆＃34;。我真的会在这里提倡JS方法。不要犹豫，用Javascript标签打开一个问题，我也很乐意为您提供帮助。

Answer 2

我知道您没有使用jQuery标记问题，但如果您愿意使用它，可以采用以下方式：

＆＃13;

<a onClick={() => this.props.resetDatePicker()}>Fire</a>

＆＃13;

$('#root div').each(function() {
  if ($(this).hasClass('hide')) {
    var count = $(this).nextUntil(':not(.hide)').addBack().length;
    $(this).html( count + ' elements hidden')
    $(this).next('.hide').hide()
  }
})

＆＃13;

Answer 3

如何使用css counter？
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

#root {
  counter-reset: section;
}

#root > div.hide {
  counter-increment: section;
  width: 0;
  height: 0;
  overflow: hidden;
}

#root > .hide + div:not(.hide):before {
  color: red;
  display: block;
  height: 100%;
  width: 100%;
  content: counter(section) " element hidden";
}

#root > .hide + div:not(.hide) + div {
  counter-reset: section;
}

https://jsfiddle.net/amoshydra/wkuyj5kc/5/

Opps，没有清楚地看到这个问题。
我会在这里留下我的旧答案..

你觉得这个黑客怎么样？

.hide {
  transform: scale(0.0001);
  line-height: 80%;
}

.hide:before {
  content: 'This is hidden';
  transform: scale(10000);
  width: 100%;
  height: 100%;
  display: block;
}

演示：https://jsfiddle.net/amoshydra/wkuyj5kc/

隐藏连续的DOM元素时显示“N个元素隐藏”

3 个答案: