0

我正在尝试根据跨度类在文档底部制作一个脚注列表，如下所示：

<h1>Header</h1>

<p>The first sentenece<span class="refer">First source</span></p>

<p>A second paragraph<span class="refer">Another source</span></p>



<hr />

<h2>References</h2>

<div id="references">
<ol>

</ol>
</div>

<script>
 $(document).ready(function() {
   var listitem =  $(".refer").text();
   $("ol").append("<li>" + listitem + "</li>");
 });

</script>

最后，我还想用引用脚注的上标数字替换跨度。目前，此脚本将所有引用添加到同一个脚注（同一个列表项）。有什么想法吗？

4

3 回答 3

1

基本上，您的问题是您试图一次获取整个元素集合（所有span.refer元素）的文本，并将其放入li. 您要做的是获取每个span.refer元素的文本（一次一个），将其放入自己li的ol.

试试这个：

 $(document).ready(function() {
     var listItems = "";

     $(".refer").each(function() {
           var listitem =  $(this).text();
           listItems += "<li>" + listitem + "</li>";
     });

     $("ol").append(listItems);
 });
于 2013-04-14T17:09:43.900 回答
1

其他方式...

// select elements to create references from
$(".refer")
    // for each one of them, add a ` [i]` where `i` is the index
    .after(function(i){ return "<sup>"+(i+1)+"</sup>" })
    // then append each one to the `ol` (better done by ID when there are more elements on the page)
    .appendTo("ol")
    // then wrap each one in an `li` element
    .wrap("<li></li>")

我对性能一无所知，但我认为这种方式反映了意图，因此易于阅读和维护。

该.after函数在适当的位置添加索引引用，使用通用索引值来跟踪项目编号（如，它不会从项目本身获取索引值）。

该.appendTo函数将元素从它们所在的位置移动到有序列表中，并且仍然返回列表中的所有项目，因此可以链接到该.wrap函数，该函数在每个最初选择的项目周围添加一些任意元素。

于 2013-04-14T17:32:39.900 回答
0

或者更好一点：

$(document).ready(function() {
     $(".refer").each(function(index, el) {
       var listitem =  $(this).text();
       $("ol").append("<li>" + listitem + "</li>");

       $(this).replaceWith($('<sup>' + (index+1) + '</sup>'));
     });
});
于 2013-04-14T17:15:25.990 回答