动态生成的内容

Question

我已经看到了引导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“，显示页面的所有标题。

在创建页面时，我使用编辑器输入，因此代码是不可见的，并存储在MySQL数据库中。

我只想让标题和段落，然后是主页标题，打印出来，但让链接动态插入到页面中，在主标题之下。

1. 捕获h2和/h2之间的文本，创建到它的链接和ID。对页面上的所有h2执行此操作。

我无法思考如何从PHP创建的页面中获取这样的信息。

页面的处理可以在post中用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'
        })
    );
});