使用 javascript 或 jquery 在 dom 中插入元素

Question

我使用此脚本将三个不同的 span 插入到第一个、第二个和第三个 li 中。

$("ul li:eq(0)").prepend("<span>1</span>");
$("ul li:eq(1)").prepend("<span>2</span>");
$("ul li:eq(2)").prepend("<span>3</span>");

有没有办法重构这段代码以消除冗余？

Answer 1

如果您想对那里的所有 li 标签执行此操作：

$("ul li").each(function(i) {
    $(this).prepend("<span>" + (i + 1) + "</span>");
});

如果有超过三个 li 标签，并且您只想对前三个执行此操作：

$("ul li:lt(3)").each(function(i) {
    $(this).prepend("<span>" + (i + 1) + "</span>");
});

在此处工作 jsFiddle： http://jsfiddle.net/jfriend00/qhgad/

Answer 2

或者你可以这样做

  $("ul li").prepend( function(index, html){
               return ("<span>" + (index+1) + "</span>");
   });