如何选择两个dom之间的所有兄弟元素

Question

现在有两个dom，上面有data属性，我想选择这两个dom元素之间的所有的dom，请问有没有办法实现？

例如

<p data-collapse-begin="1">大家好，本编又来给大家推荐新奇酷但是又不贵的小玩意了。</p>
<p>末了，还是一如既往地说下本编的想法</p>
<p>出何日党务</p>
<h2 data-collapse-end="1">操作演示</h2>
<p>天王盖地虎</p>
<p>宝塔震河妖</p>

想要的效果：[data-collapse-begin=1] 和 [data-collapse-end=1] 选择器之间的所有兄弟节点都设置为color:red

注意：data属性可以任意起名，或者用class也可以，这不是重点，重点是想实现两个dom之间的所有DOM用CSS选择器实现相应的样式

非常感谢！

Answer 1

//jQuery 
nextUntil();

DEMO

Answer 2

CSS

[data-collapse-begin="1"],
[data-collapse-begin="1"] ~ * {
  color: red;
}

[data-collapse-end="1"] ~ * {
  color: inherit;
}

原生 JS

document.querySelectorAll('[data-collapse-begin="1"]').forEach(begin => {
  for(let el = begin; el; el = el.nextElementSibling) {
    el.style.color = 'red'
    if (el.dataset.collapseEnd === '1') {
      break
    }
  }
})

Answer 3

var $ele = $("p[data-collapse-begin='1']").nextAll();
$("p[data-collapse-end='1']", $ele).prevAll();

我只会用jQuery选择器。

Answer 4

原生大概是这样写吧（写的比较烂，大家轻拍~）：

var begin = document.querySelector('[data-collapse-begin]');
var next = begin.nextElementSibling;
var i = next.matches('[data-collapse-end]');
while(!i) {
    next.style.setProperty('color', 'red');
    next = next.nextElementSibling;
    i = next.matches('[data-collapse-end]');
}

Answer 5

非常感谢，真是太厉害了！