隐藏特定元素之前的所有元素

Question

使用jQuery并在每个h1中的内容周围有一个包装器容器，我可以很容易地隐藏它们。

但是如果没有包装器容器，怎么做呢？

在下一个h1之前隐藏所有内容的最好方法是什么？

我没有使用jQuery，因为这是React应用程序的一部分。

​

h1 {
  border-bottom: solid 1px #000;
}

span {
  float: right;
}

<h1>h1 <span>x</span></h1>
<p>test 1</p>
<h2>h2</h2>
<p>test 2</p>

<h1>h1-1 <span>x</span></h1>
<p>test 3</p>
<h2>h2-2</h2>
<p>test 4</p>

​

或者将下一个h1前后的所有内容都包装在一个div标记中？

Answer 1

我可以用这个css做到这一点。只需将类" start“添加到开始折叠元素的h1，将类" upto”添加到希望元素折叠到的h1。

CSS

.start ~ *:not(h1) {
   display: none;
}

.upto ~ * {
  display: block !important;
}

HTML

<h1 class='start'>h1 <span>x</span></h1>
 ...
<h1 class ='upto'>h1-1 <span>x</span></h1>

这里，start和upto之间的所有元素都将被隐藏。你可以通过添加相应的'start‘和'upto’类来实现折叠效果

向下一个h1添加类也可以通过Javascript完成。所以，我可以有一个简单的js函数来设置'start‘和'upto’。

function collapse(startHeaderNumber, uptoHeaderNumber) {
    var allHeaders = document.getElementsByTagName("h1");
    var totalNoOfHeaders = allHeaders.length;

   if (startHeaderNumber > totalNoOfHeaders) {
       return;
   }

   var startHeader = allHeaders[startHeaderNumber - 1];
   startHeader.classList.add('start');

   if (uptoHeaderNumber <= totalNoOfHeaders) {
      var uptoHeader = allHeaders[uptoHeaderNumber - 1];
      uptoHeader.classList.add('upto');
   }

}

你可以简单地这样叫它

collapse(1 ,2)

它会折叠标题1和2之间的所有项。或者，你可以这样叫它，

collapse(1)

这将折叠从第一个报头到最后一个报头的所有元素。

有关完整的演示，请参阅此fiddle

Answer 2

听起来您想要类似于jQuery的nextUntil()函数。Here is a good guide to doing that in vanilla js。代码最终如下所示：

var nextUntil = function (elem, selector, filter) {

    // Setup siblings array
    var siblings = [];

    // Get the next sibling element
    elem = elem.nextElementSibling;

    // As long as a sibling exists
    while (elem) {

        // If we've reached our match, bail
        if (elem.matches(selector)) break;

        // If filtering by a selector, check if the sibling matches
        if (filter && !elem.matches(filter)) {
            elem = elem.nextElementSibling;
            continue;
        }

        // Otherwise, push it to the siblings array
        siblings.push(elem);

        // Get the next sibling element
        elem = elem.nextElementSibling;

    }

    return siblings;

};

我显然不知道您所做的事情背后的背景，但我认为有一种更好的方法可以通过更改HTML来绕过它。这甚至可能让您只用css nth child selectors就能完成其中的一些工作

Answer 3

您可以递归地使用来获取h1元素的所有同级元素。下面是使用previousElementSibling的工作示例：

​

const elems = document.getElementsByTagName('h1');

for (let i = 0; i < elems.length; i++) hidePrev(elems[i]);

function hidePrev(elem)
{
    var pre = elem.previousElementSibling;
    if (!pre) return;
    pre.style.display = 'none';
    hidePrev(pre);
}

h1 {
  border-bottom: solid 1px #000;
}

span {
  float: right;
}

<h1>h1 <span>x</span></h1>
<p>test 1</p>
<h2>h2</h2>
<p>test 2</p>

<h1>h1-1 <span>x</span></h1>
<p>test 3</p>
<h2>h2-2</h2>
<p>test 4</p>

​