Question

我正在尝试在id为row的现有div中生成多个唯一的div组。我希望输出为：

<div id="row">

 <div>fluffy</div>
 <div>soft</div>
 <div>green</div>

 <div>mittens</div>
 <div>coarse</div>
 <div>fire</div>   

 <div>whiskers</div>
 <div>none</div>
 <div>grey</div>      

</div>

但是我的输出目前是这样的：

<div id="row">

<div>fluffy, soft, green</div>
<div>mittens, coarse, fire</div>
<div>whiskers, none, grey</div>

</div>

我正在使用以下jquery：

function cats(catName, catFur, catEyes) {
$("#row").html('<div>' + catName + '</div>' + '<div>' + catFur + '</div>' + '<div>' + catEyes + '</div>');
}

$cat1 = ["fluffy", "soft", "green"];
$cat2 = ["mittens", "coarse", "fire"];
$cat3 = ["whiskers", "none", "grey"];

jQuery(document).ready(function() {

function catGenerator() {
    $catVars = [$cat1, $cat2, $cat3];
    cats($catVars[0], $catVars[1], $catVars[2] );
}

catGenerator();

}）;

我的总体目标是能够自动生成要生成的数字div集，例如，这里有3个div集，所以不是列出catGenerator函数下的每个cat数组，它会自动知道如何许多集合要生成。我相信这将通过for循环实现，但我无法弄明白。

我觉得整体而言我错过了一个更大的概念，我想知道是否有人有更好的方法来解决这个整体问题，这是一种更好的实践方法。谢谢！

codepen： http://codepen.io/anon/pen/IfKek

Answer 1

试试这个。

function catGenerator() {
    $catVars = [$cat1, $cat2, $cat3];
    for (var i = 0; i < $catVars.length; i++) {
        cats($catVars[i][0], $catVars[i][1], $catVars[i][2]);
    }
}

实际上“$ catVars”是一个二维数组。

$catVars[0][0] =  "fluffy";
$catVars[0][1] =  "soft";
$catVars[0][2] =  "green";
$catVars[1] = ["mittens", "coarse", "fire"]
$catVars[2] = ["whiskers", "none", "grey"];

在jQuery中生成多个唯一的div集

1 个答案: