jquery根据h1 h2 h3标签制作 "content"

Question

我想在一些包含多个部分和子部分的 div 之前添加一个内容。

我可以使用 jquery 即时解析它吗？

例如我想要这样的东西:

<div id="cont"></div>
<div id="help-area">
<h1>Head1</h1>
   ...
   ...
 <h3>Subsection1</h3>
    ....
    ....
</div>

作为我想要的输出:

<div id="cont">
 <ul>
  <li>Head1
     <ul>
       <li>Subsection1</li>
     </ul> 
  </li>
  ....
 </ul>
</div>
<div id="help-area">
<h1>Head1</h1>
   ...
   ...
 <h3>Subsection1</h3>
    ....
    ....
</div>

我可以使用 jquery 实现它还是应该使用 PHP 解析它？

提前致谢。阿曼。

Answer 1

您可以使用 jQuery 完成此操作，但这当然意味着任何访问该页面但未启用 JavaScript 的人都无法访问目录。不理想。

但是沿着这些思路:

jQuery(function($) {

  var ul = null;
  var lasth1 = null;
  var lasth1ul = null;
  var lasth2 = null;
  var lasth2ul = null;

  $("h1, h2, h3").each(function() {

    switch (this.tagName.toLowerCase()) {
      case "h1":
        if (!ul) {
          ul = $("<ul>");
        }
        lasth1 = $("<li>").html($(this).html()).appendTo(ul);
        lasth1ul = null;
        lasth2ul = null;
        break;
      case "h2":
        if (!lasth1) {
          // Deal with invalid condition, h2 with no h1 before it
        }
        else {
          if (!lasth1ul) {
            lasth1ul = $("<ul>").appendTo(lasth1);
          }
          lasth2 = $("<li>").html($(this).html()).appendTo(lasth1ul);
        }
        break;
      case "h3":
        if (!lasth2) {
          // Deal with invalid condition, h3 with no h2 before it
        }
        else {
          if (!lasth2ul) {
            lasth2ul = $("<ul>").appendTo(lasth2);
          }
          $("<li>").html($(this).html()).appendTo(lasth2ul);
        }
        break;
    }

  });
  if (ul) {
    $("#cont").append(ul);
  }

});

Live example

请注意，jQuery 保证您将按文档顺序接收匹配的元素。

以上只是一种方法。您也可以使用递归下降方法，但对于仅三个级别，上面的方法很简单并且不会那么重复......