jQuery: выбирайте элементы и перебирайте их, пока не появится определенный элемент

Question

У меня есть такой HTML-код:

<h2>H2 A</h2>
<h3>H3 A</h3>
<h3>H3 B</h3>
<h2>H2 B</h2>
<h3>H3 C</h3>
<h3>H3 D</h3>

Я пытаюсь перебрать (например :) набор H2s: найти все H3 ПОД H2;затем перейдите к следующему H2 и сделайте то же самое.Но я хочу сделать это (вероятно) рекурсивно и для всех заголовков в целом (то есть H + уровень и H + уровень + 1; h3 и h4, h4 и h5 и т. Д.) .Но до сих пор у меня не было успеха.

Мой код следующий, я думал, что использование nextUntil сделает работу, но это делает каждый итерацией по всем элементам:

function renderHeadingStructure(level, parent)
{
    $('h'+level)/*.nextUntil('h'+level).*/each(function(i,el){  
        // Copy item name to parent in list - now it is missing creating of an UL :- /
        li = document.createElement('li');
        li.innerHTML = el.innerHTML;
        parent.appendChild(li);

        // Here would be handy something like:
        // -> If crossed over H+level-1 (while going trough H+level)
        // -> then create an ul, recurse and then break

        if(level<6)
          renderHeadingStructure(level+1,li);  
    });
}

Результирующая структура должна быть такой:

<ul>
  <li><a>H2 A</a>
    <ul>
      <li><a>H3 A</a></li>
      <li><a>H3 B</a></li>
    </ul>
  </li>
  <li><a>H2 B</a>
    <ul>
      <li><a>H3 C</a></li>
      <li><a>H3 D</a></li>
    </ul>
  </li>
</ul>

Результат с кодом выше: первый H2 и все четыре H3, затем второй H2 и все четыре снова H3 - все вравно ли.

Может кто-нибудь дать мне совет или помочь решить проблему?Спасибо, любезно

Answer 1

Я сделал точно это всего несколько недель назад. Рекурсивно и с помощью nextUntil (). Плагин используется для генерации структуры документа на основе hX: s в «статье» и добавления списка к «телу» следующим образом:

$ ( 'статья') generateDocumentOutline ( 'тело');.

Код здесь: http://code.google.com/p/sleek-php/source/browse/trunk/Sites/SleekBase/Modules/Base/JS/jQuery.generateDocumentOutline.js

Редактировать: он работает независимо от того, какие у вас самые высокие и самые низкие заголовки (поэтому не ограничивается h2s и h3s).

Edit2: вы можете увидеть его здесь: http://sleekphp.com/docs/ (бит «Перейти к разделу» справа).

Answer 2

Попробуй это. Это потянет все h3 после h2. Я только что видел ваш комментарий, но кажется, что он может просто делать свою работу.

JMax

var $parent = null;
var $parentLI = null;

var $ul = $("<ul/>");

$elements = $("h2, h3");

$elements.each(function() {
   var $self = $(this);
    if ($self.get(0).tagName == "H2"){
        $parent = $self;
        $parentLI = $ul.append("<li> > " + $self.text() + "<ul></ul></li>");
    }
    else if ($self.get(0).tagName == "H3"){
        if ($parent) {
            $parentLI.find("ul").append("<li> &nbsp;&nbsp; > " + $self.text() + "</li>");
        }
    }
});

$parent.parent().append($ul);

$elements.remove();

Answer 3

Вот мое решение: http://jsfiddle.net/RYWwU/4/

var ul = "<ul></ul>";
var li = "<li></li>";
var result = $("#result");

$("h2").each(function()
{
    var heading = $(li).html("<a>" + $(this).text() + "</a>");

    var children = $(this).nextUntil("h2").filter("#container h3");

    heading.append($(ul));
    var sub = heading.find("ul");

    children.each(function()
    {
        sub.append($(li).html("<a>" + $(this).text() + "</a>"));
    });

    heading.appendTo(result);
});

Answer 4

Выберите элементы h2 с помощью jQuery и проверьте, является ли следующий элемент h3. Сделайте это функцией и вызовите функцию внутри себя, чтобы постоянно проверять наличие следующих h3 элементов.