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

Question

我正在使用此腳本在第1個，第2個和第3個li插入三個不同的span 。

$("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>");
   });