Jquery：将某个类的所有跨度添加到有序列表中

我试图根据跨度类别在文档底部列出一个脚注列表，如下所示：

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

标题
第一个sentencefirst来源

另一个来源的第二段


工具书类
$（文档）.ready（函数（）{
var listitem=$（“.reference”）.text（）；
$（“ol”）。追加（“
”+listitem+”
”；
});

---

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

基本上，您的问题是试图一次获取整个元素集合（所有

span.reference

元素）的文本，并将其放入

li

。您要做的是获取每个

span的文本。参考
元素（一次一个），将其放入自己的
li
，然后将其添加到
ol

试试这个：

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

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

     $("ol").append(listItems);
 });

$（文档）.ready（函数（）{
var listItems=“”；
$（“.reference”）。每个（函数（）{
var listitem=$（this.text（）；
listItems+=“
”+listItems+“
”；
});
$（“ol”）。附加（列表项）；
});
或者更好一点：

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

       $(this).replaceWith($('<sup>' + (index+1) + '</sup>'));
     });
});

$（文档）.ready（函数（）{
$（“.reference”）。每个功能（索引，el）{
var listitem=$（this.text（）；
$（“ol”）。追加（“
”+listitem+”
”；
$（this）.替换为（$（''+（索引+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>")

//选择要从中创建引用的元素
$（“.请参阅”）
//对于它们中的每一个，添加一个“[i]”，其中“i”是索引
.after（函数（i）{return”“+（i+1）+”“}）
//然后将每个元素附加到'ol'（当页面上有更多元素时，最好使用ID）
.附录（“ol”）
//然后用'li'元素包装每个元素
.wrap（“
”）

我不知道性能如何，但我认为这种方式很好地反映了意图，因此易于阅读和维护

.after
函数将索引引用添加到位，使用通用索引值跟踪项目编号（如中所示，它不会从项目本身获取索引值）

.appendTo
函数将元素从原来的位置移动到有序列表中，并且仍然返回列表中的所有项目，因此可以链接到
.wrap
函数，该函数在每个最初选择的项目周围添加一些任意元素。
就像gangbusters一样工作，谢谢！我还在探索这个叫做jQuery的世界，试着在实践中学习。没问题！这就是我们在这里的目的！：）祝你好运，别忘了接受！：）使用
每个
循环构建一个字符串并在一次之后调用
追加
，可能会更有效。@Ian-Nice！我将采用和扩展。给我一个moment@ZacharyKniebel听起来不错：）它只会使用更少的DOM交互，这绝对是首选。你的答案显然是对的，我只是想扩展一下itI，我希望它在性能方面会运行得很好，因为你只创建了一个jQuery对象，并通过链接重新使用它。如果可能的话，通常最好避免创建jQuery对象，因为它们很昂贵。+1很好的解决方案，而且非常酷地使用
。after
！然而，关于这一点的快速问题是：将每一个单独附加到
中，然后将每个附加到
中不是很昂贵吗？我之所以看到O（n^4），是因为
.after
循环、
.appendTo（）
（每个循环都会发生）和
.wrap
循环（每个循环都会发生）。我知道jQuery对象很昂贵，但是循环数翻倍不是会更昂贵吗？我知道，如果列表很小，它的成本可能会更低，但除此之外，它如何匹配呢？我不知道在不同的浏览器和列表大小下，哪一个性能更好。听起来像是
$（this）.html（）
的工作，以防引用中有任何重要的html元素，所以它们不会被剥离。另外，也许解释一下为什么这更好可能是有用的，我不认为这是完全明显的改善是什么。