遍历jQuery数组/将值输出到div

Question

我有一个按钮，每次点击可动态创建2个输入

输入1的 数据 ：字符串输入2的数据：数字（浮点数）（0-100）

我正在创建每个这样的数组。

var recipe_flavour_name = $("input[name='flav-name']").map(function()  {return $(this).val();}).get();
var recipe_flavour_percent = $("input[name='flav-percent']").map(function(){return $(this).val();}).get();

据我所知，数组是逗号分隔的值。

为了简单起见，让我们说：

recipe_flavour_name = a,b,c
recipe_flavour_percent = 5,6,7

然后，我想获取要在函数中使用的number value ，然后遍历所有值，然后使用jQuery的.html()将值添加到div 。

我已经试过了： flavPercent1只是recipe_flavour_percent

var arrayLength = flavPercent1.Length;

for (var i = 0; i < arrayLength; i++) {
    var flavML = (flavPercent1[0] / 100 * 100 * 1000) / 1000;
    var flavGrams = (flavML * .98 * 100) / 100;
    var flavPercent = (flavML / 100 * 1E4) / 100;
    $('.live-flavours').html('<tr>'+flavName[0]+'<td></td>'+parseFloat(flavML).toFixed(2)+'<td>'+parseFloat(flavGrams).toFixed(2)+'</td><td>'+parseFloat(flavPercent1[0]).toFixed(2)+'</td></tr>');
};

但是我只返回了flavGrams和flavPercent，将更多数据动态添加到数组中没有任何作用。

我想实现什么？

• 抓取数组中指定输入的值。
• 将它们传递给函数。
• 循环遍历这些值，然后使用jQuery将其输出为HTML。

我希望这是有道理的，并预先感谢。

Answer 1

好的，所以假设您在获取所需的数组时没有问题，问题就出在您的for循环内。

您的代码：

for (var i = 0; i < arrayLength; i++) {
var flavML = (flavPercent1[0] / 100 * AMOUNT * 1000) / 1000;
var flavGrams = (flavML * .98 * 100) / 100;
var flavPercent = (flavML / AMOUNT * 1E4) / 100;
$('.live-flavours').html('<tr>'+flavName[0]+'<td></td>'+parseFloat(flavML).toFixed(2)+'<td>'+parseFloat(flavGrams).toFixed(2)+'</td><td>'+parseFloat(flavPercent1[0]).toFixed(2)+'</td></tr>');};

1. 您将所有内容放入for循环中，但未引用该索引。 我假设到处都是您实际需要的[0]。 这意味着每当索引增加时，您将获得下一个数组元素。

   2. 您应该使用.append而不是.html。 .html表示当前的html将被您添加的内容替换。

   3. 最后，尽管可以动态化它，但我不确定在这种情况下JQuery是最好的库。 我建议您看一下Vue或MoonJs之类的库（都是非常轻便且非常简单的库）等...，以找到一种更简单，坦率地说更好的方法。 它们允许动态渲染，并且您正在尝试做的事情变得异常简化。

希望这可以帮助。

（希望如此）工作代码：

 for (var i = 0; i < arrayLength; i++) {
    var flavML = (flavPercent1[i] / 100 * AMOUNT * 1000) / 1000;
    var flavGrams = (flavML * .98 * 100) / 100;
    var flavPercent = (flavML / AMOUNT * 1E4) / 100;
    $('.live-flavours').append('<tr>'+flavName[i]+'<td></td>'+parseFloat(flavML).toFixed(2)+'<td>'+parseFloat(flavGrams).toFixed(2)+'</td><td>'+parseFloat(flavPercent1[i]).toFixed(2)+'</td></tr>');};