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保证您将按文档顺序接收匹配的元素。

以上只是一种方法。你也可以使用递归下降方法，但只有三个级别，上面很简单，不会重复 ...

Answer 2

当然可以。如果您访问要显示的内容，那么您所做的只是使用jQuery的“append”和“prepend”函数。作为快速演示，请查看

$("#cont").append("<ul><li>Head1<ul><li>Subsection1</li></ul></li></ul>")

Jquery基于h1 h2 h3标签制作“内容”

2 个答案: