将段落编号附加到目录标题

Question

我在这里遇到一些问题，似乎无法解决我的生活问题。

我有一页文字结构如下：

<h2>Main heading</h2>

<p>
<span class="paranum">1</span>
Nam a dapibus felis, id adipiscing libero. 
Aliquam volutpat vel metus at molestie. Curabitur gravida sed justo at feugiat. 
In ut pellentesque lorem. Nunc mollis, libero a vestibulum pharetra, neque enim 
lacinia odio, ut dignissim nisl lectus vitae nisl. Curabitur ac erat nibh. 
Suspendisse posuere vitae metus at semper. Aliquam vitae tellus id nulla porttitor
 pellentesque at nec elit. Sed nec arcu quis est eleifend gravida.</p>

<p>
<span class="paranum">2</span>
Nam a dapibus felis, id adipiscing libero. Aliquam
volutpat vel metus at molestie. Curabitur gravida sed justo at feugiat. In ut 
pellentesque lorem. Nunc mollis, libero a vestibulum pharetra, neque enim lacinia odio,
ut dignissim nisl lectus vitae nisl. Curabitur ac erat nibh. Suspendisse posuere vitae
metus at semper. Aliquam vitae tellus id nulla porttitor pellentesque at nec elit. 
Sed nec arcu quis est eleifend gravida.</p>

在我的页面顶部，我有一个目录，由CMS在运行时生成：

<ul class="table-of-contents">
    <li><a href="#heading1">Heading 1</a></li>
    <li><a href="#mainheading">Main heading</a></li>
    <li><a href="#aheading">A heading</a></li>
</ul>

使用JavaScript或jQuery（或人们可能建议的任何其他方法！）我需要找到一种方法来获取在下面找到的段落编号（由类paranum定义）页面上的标题，并将其与内容列表一起显示，如下所示：

非常感谢任何帮助！

Answer 1

在每个标题中提供一个id，用于链接到标题。

<h2 id="mainheading">Main heading</h2>

使用jQuery收集第一个和最后一个paranum：

var paranums = $(id).find('.paranum');
var firstnum = $('#'+id+' .paranum:first'),
    lastnum = $('#'+id+' .paranum:last');

Answer 2

尝试这个来获取所有的paranum类值：

   $('.paranum').each(function () 
   {
       var li = $("<li></li>");
       li.append(this.html());

       $(".table-of-contents").append(li);
   });

//注意把它放在onclick事件中。