動態生成的內容DIV

Question

我已經看到了Bootstrap github頁面，以及它們如何處理其側欄，該側欄向下滑動並具有文章的所有標題。

我正在嘗試一種可以在現有系統上建立的方式，該系統可以手動鍵入每個錨點並為其創建鏈接。

目前我有

<h1>Main Title</h1>
<a href="#Para5" class="scroll">Para5</a>
<a href="#Para10" class="scroll">Para10</a>
<a href="#Para15" class="scroll">Para15</a>
<a href="#Para20" class="scroll">Para20</a>
<br/>
<h2>Para1</h2>
     <p>.....</p>
<h2>Para2</h2>
     <p>.....</p>
<h2>Para3</h2>
     <p>.....</p>
<h2>Para4</h2>
     <p>.....</p>
<h2>Para5</h2>
     <p>.....</p>
etc...

然后，我必須手動添加此類標題的ID，以使每5個標題都有一個鏈接和一個顯示“ Show all”（顯示全部）的按鈕，以顯示該頁面的所有標題。

創建頁面I時，使用HTML嵌入式文本編輯器輸入頁面I，因此代碼是不可見的，並存儲在MySQL數據庫中。

我只想輸入標題和段落，然后輸入Main Page標題，但是要讓鏈接動態地將其自身插入到頁面的主標題下。

1. 在h2和/ h2之間捕獲文本，創建指向它的鏈接和ID。 對頁面上的所有h2執行此操作。

我一生都無法想到如何從PHP創建的頁面中捕獲此類信息。

該頁面的處理可以在jQuery和Javascript之后或在PHP中完成。

首選在PHP中執行操作。

---

忽略第五要素。

<h1>Main Title</h1>
<div id="paraNav">
</div>
<br/>
<div id="headings">
<h2>Para1</h2>
     <p>.....</p>
<h2>Para2</h2>
     <p>.....</p>
<h2>Para3</h2>
     <p>.....</p>
<h2>Para4</h2>
     <p>.....</p>
<h2>Para5</h2>
     <p>.....</p>
</div>

目的是獲取標題文本，例如：

$('#headings h2').each(function(i,$el){
    var headingTitle = $el.text;  **  
      document.write('<a href="#headingTitle" class="scroll">headingTitle</a>')
    $('h2').append.attr({
         'id':headingTitle
    });
});

**不確定此位是否存在。 （獲取標簽之間的內容/值/文本）

Answer 1

您可能可以使用jQuery完成此操作。

這既快速又骯臟，但是可能可以幫助您入門。 我還沒有測試。 可能存在語法錯誤。

var linkArray = [];

$('h2:nth-child(5)').each(function () {
    linkArray.push({
        text: $(this).text,
        // href: $(this).id
    });
});

for (var i = 0; i < linkArray.length; i++) {
    $('#linkcontainer').append('<a href="' + linkArray[i].text + '">' + linkArray[i].text + '</a>');
}

Answer 2

我認為jQuery有一些更好的工具可以做您想做的事情。 如果您嘗試使用PHP來完成這項工作可能是一項草率的工作，而jQuery則只需幾行就可以完成。 就像是

$('#content h2:nth-of-type(5n)').each(function(i,$el){
    ver headingId = $el.attr('id');
    $('#contentNav').append(
        $('<a/>').html(headingId).attr({
            'href':'#'+headingId,
            'class':'scroll'
        })
    );
});