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 +水平和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再次 - 都是相同的li。

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

Answer 1

试试这个。这将在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 2

几个星期前我完全 。递归地和nextUntil（）。该插件用于根据“文章”中的hX：s生成文档大纲，并将列表附加到“body”，如下所示：

$（ '物品'）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 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);
});

jQuery：选择元素并迭代它们直到出现某个元素

4 个答案: