jquery - 动态追加数据到div

Question

我正在创建八个 div，我想使用这些 div 类将其 append 一个和一个到其他八个 div:

var foo1 = "<span class='fooClass'>Foo text1</span>";
var foo2 = "<span class='fooClass'>Foo text2</span>";
var foo3 = "<span class='fooClass'>Foo text3</span>";
var foo4 = "<span class='fooClass'>Foo text4</span>";
var foo5 = "<span class='fooClass'>Foo text5</span>";
var foo6 = "<span class='fooClass'>Foo text6</span>";
var foo7 = "<span class='fooClass'>Foo text7</span>";
var foo8 = "<span class='fooClass'>Foo text8</span>";

$('.fooData').each(function(i) {
    $('this').append('foo' + i);
});

.fooData div(同样，也有八个)是在创建我要 append 的 div 之前创建的。

但是这不起作用(即没有数据添加到 .fooData-divs 中)。我做错了什么？

注意: .fooData-div 还具有其他重要的类，例如:

<div class="color4 fooData leftSide"></div>

Answer 1

最好使用数组，而不是使用变量并评估其名称。

foo = [];
var foo[0] = $("<span class='fooClass'>Foo text1</span>");
var foo[1] = $("<span class='fooClass'>Foo text2</span>");

$('.fooData').each(function(i) {
    $(this).append(foo[i]);
});