動態生成的內容DIV

我已經看到了引導github頁面，以及他們如何處理他們的邊欄，滑落並擁有文章的所有標題。動態生成的內容DIV

我想要建立一個方法，我現有的系統是手動輸入每個錨點併爲其創建鏈接。

目前我有

<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個標題有一個鏈接和一個按鈕，上面寫着「全部顯示」，將顯示所有的標題爲頁面。

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

我只想擁有標題和段落，然後輸入主頁標題，但要讓鏈接自動插入到主標題下的頁面中。

在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 
    }); 
});

**如果該位存在不確定。（獲取標籤之間的內容/值/文本）

來源

2013-03-15 Ryan Jeremiah Freeman

您將需要嘗試一下，發佈代碼並解釋什麼不起作用。 SO不是免費的自由職業者服務。 – isherwood 2013-03-15 15:08:14

http://jsfiddle.net/xg2Mu/這是我認爲你需要的，但是，你應該更具體，顯示一些代碼，你已經嘗試過，等等... – Val 2013-03-15 15:14:27

如果你喜歡做它在PHP，這意味着你不願意學習，或退出足夠的學習新的東西...... – Val 2013-03-15 15:16:45

您可以使用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>'); 
}

來源

2013-03-15 15:12:17

我認爲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' 
     }) 
    ); 
});

來源

2013-03-15 15:14:45

動態生成的內容DIV

回答

相關問題