Question

我在变量中有一个字符串：

var dot = '<div class="dot"></div>'

我试图将它多次附加到某些HTML上：

var number = 3; // this has come from an $('img').length; could be any number

$(dot * number).appendTo('.m-slide-ctrl');

以上显然不起作用，但我不确定如何处理如此简单的事情。我希望写入字符串的次数取决于图像的数量（因此使用.length）

任何帮助都会很棒。

http://jsfiddle.net/tmyie/VE75U/

Answer 1

没有循环，只追加一次

$(Array(number+1).join("<div class='dot'></div>")).appendTo('.m-slide-ctrl');

Answer 2

只需使用for循环

for (var i=0;i<number;i++)
{
    $(dot).appendTo('.m-slide-ctrl');
}

DEMO

Answer 3

var slides = $('.m-slide img');        // Images in gallery
var n = slides.length;                 // count images
var dots = '';                         // HTML string

for(var i=0; i<n; i++){
    dots += '<div class="dot"></div>'; // Create buttons
}
$('.m-slide-ctrl').append( dots );     // Append them
                                       // outside the loop. Faster!

没有理由强迫jQuery为同一个元素多次查找DOM，并且对于该元素的每次迭代.append()都有一些HTML，如果所有这些都可以只执行一次循环外。说得通？此外，native for循环比任何其他jQuery循环方法更快。

Answer 4

如果它来自$('img').length，你可以做类似的事情：

var $dotDivProto = $('<div class="dot"></div>');

$('.m-slide-ctrl').append($('img').map(function () {
    return $dotDivProto.clone();
});

或者只是每次解析：

$('.m-slide-ctrl').append($('img').map(function () {
    return $('<div class="dot"></div>');
});

appendTo，多次

4 个答案: