我如何循环列表并在 JQuery 中的段落中添加上标

Question

我是 JQuery 的新手，我正在读一本书，我正在按照示例进行操作，但我无法尝试这样做：

 $(document).ready(function () { var $notes = $('<ol id="notes"></ol>').insertAfter('#hexagon'); $('span.footnote').each(function (index) { $('<sup>' + (index + 1) + '</sup>').insertAfter('.footer'); $(this).appendTo($notes).wrap('<li></li>'); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="cell"> <h1 id="f-title">Flatland: A Romance of Many Dimensions</h1> <div id="f-author">by Edwin A. Abbott</div> <h2>Part 1, Section 3</h2> <h3 id="f-subtitle">Concerning the Inhabitants of Flatland</h3> </div> <div id="excerpt" class="cell">an excerpt</div> <div class="chapter cell"> <p class="square">Our Professional Men and Gentlemen are Squares (to which class I myself belong) and Five-Sided Figures or <a href="http://en.wikipedia.org/wiki/Pentagon">Pentagons </a>.</p> <p id="hexagon" class="nobility hexagon">Next above these come the Nobility, of whom there are several degrees, beginning at Six-Sided Figures, or <a class="hexagon" href="http://en.wikipedia.org/wiki/Hexagon"><span class="footer">Hexagons</span></a>, and from thence rising in the number of their sides till they receive the honourable title of <a href="http://en.wikipedia.org/wiki/Polygon"><span class="footer">Polygonal</span></a>, or many-Sided. Finally when the number of the sides becomes so numerous, and the sides themselves so small, that the figure cannot be distinguished from a <a href="http://en.wikipedia.org/wiki/Circle">circle</a>, he is included in the Circular or Priestly order; and this is the highest class of all.</p> <br> <p> <blockquote class="pull-quote">It is a <span class="drop">Law of Nature</span> with us that a male child shall have one more side than his father, so that each generation shall rise (as a rule) one step in the scale of development and nobility. Thus the son of a Square is a Pentagon; the son of a Pentagon, a Hexagon; and so on. </blockquote> </p><br> </div> <div class="cell"> <span class="footnote">And how perfect a proof of the natural fitness and, I may almost say, the divine origin of thearistocratic constitution of the States of Flatland,</span> <span class="footnote">By a judicious use of this Law of Nature, the Polygons and Circles are almost always able to stifle sedition in its very cradle. taking advantage of the irrepressible and boundless hopefulness of the human mind;&hellip;</span> </div>

我试图更改 JQuery，以便它附加到 class 页脚，但它在两个链接中将每次迭代显示为 21，而不是第一个链接为 1，第二个链接为 2。

我尝试只使用 (index) 而不是，但它显示 10，但我希望它为第一个链接显示 1，为第二个链接显示 2 我知道当你使用索引时它会显示数组 0 1 和行

$('<sup>' + (index + 1) + '</sup>').insertAfter('.footer');

只需将 1 添加到数组中即可计数 1 2。

Answer 1

您的代码可以满足您的需求。 但是顺序是相反的，因为您 append 在.footer class 之后的每个sup - 因此在已经附加的sup之前。 您可以使用for循环来反转所选脚注的顺序：

var footnotes = $('span.footnote');
  
for (i = footnotes.length - 1; i >= 0; i--) {...}

如果你想分隔超级数字（可能用逗号），你可以使用一个三元运算符（一个压缩的 if else 语句）到 append 那个分隔符，如果它不是最后一个元素（因为它是相反的，而不是第一个元素;） :

(i > 0 ? '' : ',')

工作示例：

 $(document).ready(function () { var $notes = $('<ol id="notes"></ol>').insertAfter('#hexagon'); var footnotes = $('span.footnote'); for(i = footnotes.length - 1; i >= 0; i--){ $('<sup>' + (i + 1) + (i > 0? '': ',') + '</sup>').insertAfter('.footer'); $(footnotes[i]).appendTo($notes).wrap('<li></li>'); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="cell"> <h1 id="f-title">Flatland: A Romance of Many Dimensions</h1> <div id="f-author">by Edwin A. Abbott</div> <h2>Part 1, Section 3</h2> <h3 id="f-subtitle">Concerning the Inhabitants of Flatland</h3> </div> <div id="excerpt" class="cell">an excerpt</div> <div class="chapter cell"> <p class="square">Our Professional Men and Gentlemen are Squares (to which class I myself belong) and Five-Sided Figures or <a href="http://en.wikipedia.org/wiki/Pentagon">Pentagons </a>.</p> <p id="hexagon" class="nobility hexagon">Next above these come the Nobility, of whom there are several degrees, beginning at Six-Sided Figures, or <a class="hexagon" href="http://en.wikipedia.org/wiki/Hexagon"><span class="footer">Hexagons</span></a>, and from thence rising in the number of their sides till they receive the honourable title of <a href="http://en.wikipedia.org/wiki/Polygon"><span class="footer">Polygonal</span></a>, or many-Sided. Finally when the number of the sides becomes so numerous, and the sides themselves so small, that the figure cannot be distinguished from a <a href="http://en.wikipedia.org/wiki/Circle">circle</a>, he is included in the Circular or Priestly order; and this is the highest class of all.</p> <br> <p> <blockquote class="pull-quote">It is a <span class="drop">Law of Nature</span> with us that a male child shall have one more side than his father, so that each generation shall rise (as a rule) one step in the scale of development and nobility. Thus the son of a Square is a Pentagon; the son of a Pentagon, a Hexagon; and so on. </blockquote> </p><br> </div> <div class="cell"> <span class="footnote">And how perfect a proof of the natural fitness and, I may almost say, the divine origin of thearistocratic constitution of the States of Flatland,</span> <span class="footnote">By a judicious use of this Law of Nature, the Polygons and Circles are almost always able to stifle sedition in its very cradle. taking advantage of the irrepressible and boundless hopefulness of the human mind;&hellip;</span> </div>