将所有内容包裹在 hr 元素之间

Question

试图找到一种方法在代码中的 hr 标记之间包装所有内容，但到目前为止还没有。对代码有什么建议吗？

这是我现在正在做的事情（也作为fiddle）：

$('hr').each(function() {
  $(this).next('hr').wrapAll('<div style="background-color:yellow"></div>');
});

Text
<hr>
Text1
Text2
<hr>
Text3
<hr>
Text4
Text5
<hr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

jQuery 对文本节点的帮助并不多（contents 除外）。这里最简单的可能就是使用 DOM 本身来查找以下兄弟节点（包括文本节点），然后将它们包装在 div; 中。见 cmets：

$('hr').each(function() {
  // Build an array of all nodes (including text nodes)
  // up to and not including the next HR if any
  var nodes = [];
  var n = this.nextSibling;
  while (n && n.nodeName != "HR") {
    nodes.push(n);
    n = n.nextSibling;
  }
  // Wrap them in a div
  $(nodes).wrapAll('<div style="background-color:yellow"></div>');
});

Text
<hr>
Text1
Text2
<hr>
Text3
<hr>
Text4
Text5
<hr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>