jquery基於h1 h2 h3標籤製作「內容」

我想添加一些內容之前，有幾個部分和子部分的div。jquery基於h1 h2 h3標籤製作「內容」

我可以使用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？

在此先感謝。 Arman。

來源

2011-04-01 Arman

您可以與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的保證，您會收到文件的順序匹配的元素。

以上只是一種方法。你也可以使用遞歸下降的方法，但只有三個級別上面是簡單的，不會重複自己那多...

來源

2011-04-01 09:32:20

謝謝你簡單快速的解決方案。通常，我更喜歡重複一些事情，而不是一年之後無法閱讀的複雜代碼。 – Arman 2011-04-01 12:02:21

大聲笑我投了票和一些有趣的恐龍跳舞... – Arman 2011-04-01 12:03:25

@阿曼：我認爲他們是獨角獸。 :-)好交易，很高興幫助。 – 2011-04-01 12:05:21

-1

當然可以。如果你訪問你想要顯示的內容，那麼你所做的就是使用jQuery的「append」和「prepend」函數。作爲一個快速演示，檢查了這

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

來源

2011-04-01 09:28:01 Nikhil

@Nikhill：謝謝，我怎樣才能得到所有h1-h2-h3遞歸？ – Arman 2011-04-01 09:30:26

你需要爲它們中的每一個明確地編碼。沒有快速的方法做到這一點（據我所知！） – Nikhil 2011-04-01 10:08:52

jquery基於h1 h2 h3標籤製作「內容」

回答

相關問題