使用Javascript Bookmarklet按标题将页面内容分块（第2部分）

我有一些javascript可以帮助我，我想知道是否可以对它进行调整，以便将较小标题的

div

分组到下一个较高标题的

div

中

换句话说，从以下HTML开始：

<p>Some paragraph</p>
<h1>Heading 1</h1>
<p>Some paragraph</p>
<p>Some paragraph</p>

<h2>Heading 2</h2>
<p>Some paragraph</p>
<p>Some paragraph</p>

<h3>Heading 3</h3>
<p>Some paragraph</p>
<p>Some paragraph</p>

<h1>Heading 1</h1>
<p>Some paragraph</p>
<p>Some paragraph</p>

<h2>Heading 2</h2>
<p>Some paragraph</p>
<p>Some paragraph</p>

<h3>Heading 3</h3>
<p>Some paragraph</p>
<p>Some paragraph</p>
...  

某个段落

标题1
某段

某段

标题2
某段

某段

标题3
某段

某段

标题1
某段

某段

标题2
某段

某段

标题3
某段

某段

...  

…然后使用javascript（通过bookmarklet，因为这一切都必须在客户端完成）来完成以下操作：

<div class="one">

  <h1>Heading 1</h1>
  <p>paragraph</p>

  <div class="two">
    <h2>Heading 2</h2>
    <p>paragraph</p>

    <div class="three">
      <h3>Heading 3</h3>
      <p>paragraph</p>
    </div>

    <div class="three">
      <h3>Heading 3</h3>
      <p>paragraph</p>
    </div>

  </div>

</div>

<div class="one">
  <h1>Heading 1</h1>
  <p>paragraph</p>

  <div class="two">
    <h2>Heading 2</h2>
    <p>paragraph</p>

    <div class="three">
      <h3>Heading 3</h3>
      <p>paragraph</p>
    </div>

  </div>

</div>

标题1
段落

标题2
段落

标题3
段落

标题3
段落

标题1
段落

标题2
段落

标题3
段落

如何将类分配给每个不同的标题，而不是使用：header，单独使用每个元素类型，从最高到最低工作

 function a() {

    $('h3').each(function() {
        $(this)
            .add($(this).nextUntil( $("h3")) ).wrapAll( $("<div class='three'>") );
    });

    $('h2').each(function() {
        $(this)
            .add($(this).nextUntil( $("h2")) ).wrapAll( $("<div class='two'>") );
    }); 


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


};

函数a（）{
$（'h3'）。每个（函数（）{
$（本）
.add（$（this.nextUntil（$（“h3”））.wrapAll（$（“”））；
});
$（'h2'）。每个（函数（）{
$（本）
.add（$（this.nextUntil（$（“h2”））.wrapAll（$（“”））；
}); 
$（'h1'）。每个（函数（）{
$（本）
.add（$（this）.nextUntil（$（“h1”））.wrapAll（$（“”））；
});
};

将我的答案改为第一部分：

var parent = document.body, i;
var tmpArray = [];
for (i=0; i<parent.childNodes.length; i++)
 tmpArray.push(parent.childNodes[i]);


var headerArray = [];
var classNames = [null, "one", "two", "three", "four", "five"]

var newArray = [], currElem = null;

for (i=0; i<tmpArray.length; i++) {
  var elem = tmpArray[i];
  var tagData = null;
  var which;
  if (elem.tagName && 
      elem.tagName.charAt(0) == 'H' && 
      (which = parseInt(elem.tagName.charAt(1))) > 0) {  
    currElem = document.createElement("div");
    currElem.className = classNames[which];
    currElem.appendChild (elem);
    headerArray[which] = currElem;
    if (which > 1)
      headerArray[which-1].appendChild(currElem); 
    else
      newArray.push(currElem);
    }
  else  {
    if (currElem)
      currElem.appendChild (elem);
    else 
      newArray.push(elem);
    } 
  }

parent.innerHTML = '';
for (i=0; i<newArray.length; i++) {
 parent.appendChild (newArray[i]);
 }

var parent=document.body，i；
var tmpArray=[]；
对于（i=0；i 1）
headerArray[which-1]。appendChild（currElem）；
其他的
newArray.push（currElem）；
}
否则{
if（currElem）
currElem.appendChild（elem）；
其他的
newArray.push（elem）；
} 
}
parent.innerHTML=''；
对于（i=0；它正确地抓取了每个组，但它将每个元素双重包装在相同的
div
，并将所有内容无休止地嵌套在彼此内部。在组织级别上，所有
class='one'
div
都应该位于顶层，并且应该包含在
h1之间出现的所有其他类和下一个
h1
。不过，这不是双重包装，我不小心调用了该函数两次。但它仍然嵌套在上一个函数中创建的每个连续div中，无论级别如何。您的输出html无效，您不能关闭其中一个div。哎呀，感谢您捕捉到了这一点。现已修复。它对我不起作用。我在这一行遇到一个错误：
（which=parseInt（elem.tagName.charAt（1）））>0{
。我编辑了它，在它应该是“if”的时候，我不知怎的得到了一个“f”。这个问题解决了吗？我测试过这个问题，这个错误一定是在我粘贴它的时候发生的，或者是什么……如果仍然不起作用，我将再次测试并解决它。（需要注意的一点是：您没有真正定义如果有H3但从来没有H2（等等）…在我的代码中，我的答案是让它崩溃。：）您可以使用异常处理程序或该场景的特殊情况来包装整个过程，或者只是避免那种输入html…您的选择！）