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>

我正在尝试迭代（例如：）一组 H2：找到所有 H3 UNDER H2；然后转到下一个 H2 并执行相同的操作。但我想（可能）递归地做到这一点，并且一般适用于所有标题（即 H+level 和 H+level+1；h3 和 h4、h4 和 h5，等等）。但是到现在我还没有成功。

我的代码如下，我认为使用 nextUntil 可以完成这项工作，但它会使 each 迭代所有元素：

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 - 都在相等的 li。

有人可以给我建议或帮助解决问题吗？ 谢谢你

Answer 1

我在几周前完全做到了这一点。递归并使用 nextUntil()。该插件用于根据“article”中的 hX:s 生成文档大纲，并将列表附加到“body”，如下所示：

$('article').generateDocumentOutline('body');

此处代码：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

试试这个。这将在 h2 之后拉出所有 h3。我刚刚看到你的评论，但似乎它可能只是做这项工作。

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

使用 jQuery 选择 h2 元素并检查下一个元素是否为 h3。将其设为函数并在其内部调用该函数以继续检查即将出现的 h3 元素。

Answer 4

这是我的解决方案：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);
});