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

別の方法...

// 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 に答える
1

基本的に、あなたの問題は、要素のコレクション全体（すべてのspan.refer要素）のテキストを一度に取得して、li. やりたいことは、各span.refer要素のテキストを (一度に 1 つずつ) 取得し、それを独自の に入れ、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 に答える