使用Javascript书签按标题分块页面内容(第2部分) [英] Use Javascript Bookmarklet to Chunk Page Content by Headings (part 2)

问题描述

我有一些JavaScript， @pimvdb 通过

I've some javascript that @pimvdb helped me with here, and I was wondering if it could be tweaked so that it would group lesser heading's div's within the next higher's div.

换句话说，以以下HTML开头:

In other words, start with this 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>
...  

…，然后使用javascript(通过小书签，因为所有这些操作都必须在客户端完成)以结束:

… and then use javascript (via a bookmarklet because it all has to be done client-side) to end up with this:

<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>

推荐答案

更改了我对第一部分的回答:

Altered my answer to part one:

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]);
 }

这篇关于使用Javascript书签按标题分块页面内容(第2部分)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！