jquery------脚注的使用

index.jsp

<script type="text/javascript" src="../js/my.js"></script>

<div id="chapter">
        <p>How admirable is the Law of Compensation!<span id="footnote">today is Monday!</span><span class="pull">A wonderful day!</span></p>
        <p>And how perfect a proof of the natural fitness!<span id="footnote">today is Friday!</span>I believe you!</p>
        <p>Next above these come the Nobility<span id="drop">,of Whom there are!</span><span id="footnote">today is Saturday!</span>If you work hard,you will succeed!</p>
    </div>
    
    <div style="width:500px;height:500px;"></div>
    
    <a href="#top" style="display:block;margin:0px;padding:0px">back to top</a>
    <div id="footer"></div>

 

my.js

$(document).ready({
var $note=$("<ol></ol>").insertBefore("#footer");
        $("span#footnote").each(function(index){
            $(this)
                .before(["<a href='#footnote-",
                         index+1,
                         "' id='context-",
                         index+1,
                         "' class='context'>",
                         "<sup style='font-size:15px'>",
                         index+1,
                         "</sup></a>"].join(""))   //反向插入
                .append(["<a href='#context-",
                         index+1,
                         "'>context</a>"].join(""))
                .appendTo($note)
                .wrap("<li id='footnote-"+(index+1)+"'></li>");
        });
});