动态生成的内容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

回答

相关问题