Question

如何将带有标题的文档分开？

转换此

<h1>chapter 1</h1>
<p>lorem ipsum</p>
<p>sit amet</p>
<h1>chapter 2</h1>
<p>lorem ipsum</p>
<p>sit amet</p>

进入这个

<div class="chapter">
  <h1>chapter 1</h1>
  <p>lorem ipsum</p>
  <p>sit amet</p>
</div>
<div class="chapter">
  <h1>chapter 2</h1>
  <p>lorem ipsum</p>
  <p>sit amet</p>
</div>

我想使用jQuery这很容易，但我还没想到。

Answer 1

尝试这样的事情：

$('h1').each( function(){
    $(this).nextUntil('h1').andSelf().wrapAll('<div class="chapter">');
});

示例：http://jsfiddle.net/redler/YVF2w/

Answer 2

我想使用jQuery这很容易，但我还没想到。

不要使用jQuery执行此操作。将其写入您的HTML，或使用您使用的任何视图/模板引擎来编写HTML。

还有<section>和<header>之类的东西我建议使用它们（但由于它们是HTML5，你可能需要html5垫片）。

Answer 3

当然如果你想在没有jQuery的情况下做到这一点，那就不那么难了：

/* Convert a list to an array
 */
function listToArray(list) {
  var result = [],
      i = list.length;
  while (i--) result[i] = list[i];
  return result;
}


/* Wrap elements with tagName in a div until next sibiling
 * with same tagName
 */
function wrapSiblings(tag) {
  tag = tag.toLowerCase();

  // Take elements out of document while processing so
  // need to convert NodeList to array
  var el, els = listToArray(document.getElementsByTagName(tag));
  var div = document.createElement('div');
  div.className = 'chapter';
  var oDiv, oEl;

  for (var i=0, iLen=els.length; i<iLen; i++) {
    el = els[i];
    oEl = el.nextSibling;
    oDiv = div.cloneNode(false);

    // Shift all siblings into Div
    while (oEl && !(oEl.tagName && oEl.tagName.toLowerCase() == tag)) {
      oDiv.appendChild(oEl);

      // Moved sibling, get nextSibling - live list!
      oEl = el.nextSibling;
    }

    // Replace el with div, then put el into div
    el.parentNode.insertBefore(oDiv, el);
    oDiv.insertBefore(el, oDiv.firstChild);
  }
}

将带有标题的HTML文档分成几个部分

3 个答案: