Question

我有一个像：

这样的数组

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>');

Answer 1

你不能在字符串连接的中间抛出for循环。

var button = $('#button');

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

我相信这有一些好处，比如......

不强制浏览器解析HTML。
缓存对目标元素#button的引用。
$.each()对我来说比明确的for循环更优雅。

Answer 2

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

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

OR

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

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

这是防止语法错误的更好方法。追加。

Answer 3

你不能像这样连接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');

Answer 4

使用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/

Answer 5

尝试：

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

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

我从.appendTo切换到.append，因为这似乎是一种间接的做事方式。对于我们正在做的事情，这一点要清楚一点。

添加带有span标签的数组键

5 个答案: