添加數組鍵與span標籤

我有這樣一個數組：添加數組鍵與span標籤

var totalNum = new Array('img', 'img', 'img', 'img');

現在

在documentready我在HTML頁面就像加了div：

$('#mainid').after('<div id="button"></div>');

問題是我想補充<span></span>標籤帶總數在totalNum陣列等：

<div id="button"> 
    <span>1</span> 
    <span>2</span> 
    <span>3</span> 
    <span>4</span> 
</div>

我試圖用for(){}循環到.after()，但得到了語法錯誤。我的代碼是在這裏：

jQuery('#mainid').after('<div id="button">' + 
     for(i=1;i<=totalNum.length;i++){ 
    jQuery('<span>'+i+'</span>').appendTo('#button'); 
} 
    + '</div>');

來源

2012-02-29 jogesh_pi

#button和＃jp-button不是相同的div – 2012-02-29 07:12:28

@SeanCarruthers對不起現在改變了，這是我的複製粘貼。 – 2012-02-29 07:13:03

好吧，只是確保這不是你的問題:) – 2012-02-29 07:13:29

jQuery('#mainid').after('<div id="button"></div>'); 

for(i=1;i<=totalNum.length;i++){ 
    jQuery('<span>'+i+'</span>').appendTo('#button'); 
}

var tmpStr = ''; 
for(i=1;i<=totalNum.length;i++){ 
    tmpStr += '<span>'+i+'</span>'; 
} 

jQuery('#button').append(tmpStr);

這將是一個更好的辦法來防止語法錯誤&追加。

來源

2012-02-29 07:13:44 linuxeasy

啊，非常感謝它的作品;） – 2012-02-29 07:18:49

您不能在字符串連接的中間拋出for循環。

var button = $('#button'); 

$.each(totalNum, function(index) { 
    $('<span />', { text: index + 1 }).appendTo(button); 
});

我相信這有一定的好處，如...

沒有迫使瀏覽器解析HTML。
緩存對目標元素#button的引用。
$.each()對我來說比明確的for循環更優雅。

來源

2012-02-29 07:14:31 alex

儘量只：

jQuery('#mainid').after('<div id="button"></div>'); 

for(i=1; i<=totalNum.length; i++) { 
    jQuery('#button').append('<span>' + i + '</span>'); 
}

我從.appendTo切換到.append，因爲這只是好像做事情的間接方式。這對我們正在做的事更清楚一點。

來源

2012-02-29 07:15:34

你不能像這樣連接for循環！你也忘了宣佈i。然後推薦緩存長度並將所有html字符串附加到變量中並最後追加到對象以儘可能避免強調DOM。你可以這樣做：

var spans = ''; 
for (var i=1, len=totalNum.length; i<len; i++) { 
    spans += '<span>'+ i +'</span>'; 
} 
$('<div id="button">').append(spans).appendTo('#mainid');

來源

2012-02-29 07:16:08 elclanrs

使用map功能循環數組作爲一個表達式，並使用join到數組項目連接成一個字符串：

jQuery('#mainid').after(
    '<div id="button">' + 
    jQuery.map(totalNum, function(e,i){ return '<span>'+(i+1)+'</span>'; }).join('') + 
    '</div>' 
);

演示：http://jsfiddle.net/Guffa/U48yP/

來源

2012-02-29 07:25:16 Guffa

哇，我不知道這件事。但'linuxeasy的答案也適用於我。但是非常感謝這個''。map（）'+1;） – 2012-02-29 07:29:14

添加數組鍵與span標籤

回答

相關問題