Dynamically Generated Contents DIV

Question

I have seen the bootstrap github page and how they process their sidebar that slides down and has all the titles of the articles.

I am trying to think of a way that would build upon, the current system I have which is manually typing out each anchor point and creating a link for it.

Currently I have

<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...

I then have to manually add the id's for such headings, aiming to have every 5 headings have a link and a button that says "Show all" that would show all of the headings for the page.

When creating a page I which gets typed up using a HTML embedded text editor so code is invisible and stored in MySQL database.

I would just like to have the headings and paragraphs and then the Main Page title, typed out but to have the links dynamically insert themselves into the page, underneath the main title.

1. Capture text between h2 and /h2, create a link and ID to it. Do this for all h2 on the page.

I cannot for the life of me think how to capture information like this out of a page being created by PHP.

The processing of the page could be done in post with jQuery and Javascript or pre in PHP.

Prefer to do things in PHP.

---

Ignoring the 5th element thing.

<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>

Aim is to grab the text of the heading so something like:

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

**not sure if this bit exists. (get content/value/text between tags)

Answer 1

You can likely do this with jQuery.

This is quick and dirty, but can probably get you started. I haven't tested this. There may be syntax errors.

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

I think jQuery has some better tools for doing what you want to do. It might be a sloppy job if you tried to do it with PHP, whereas jQuery you can do it with a few lines. Something like

$('#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'
        })
    );
});