Используйте Javascript Bookmarklet для разделения содержимого страницы по заголовкам (часть 2) - PullRequest
Новая
       8

Используйте Javascript Bookmarklet для разделения содержимого страницы по заголовкам (часть 2)

1 голос
/ 24 мая 2011

У меня есть некоторый javascript, который @ pimvdb помог мне с здесь , и мне было интересно, можно ли его настроить так, чтобы он группировал меньшие заголовки 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>
...

… а затем используйте javascript (через букмарклет, потому что все это должно быть сделано на стороне клиента), чтобы получить следующее: 

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

Ответы [ 2 ]

0 голосов
/ 25 мая 2011

Изменен мой ответ на первую часть: 

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]);
 }
0 голосов
/ 24 мая 2011

Как насчет простого присвоения классов каждому отдельному заголовку вместо использования: заголовка, индивидуально используйте каждый тип элемента и работайте от самого высокого до самого низкого. 

 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'>") );
    });


};
...