时间戳

首页 > 解决方案 > 循环遍历 jQuery 数组/将值输出到 div

javascript - 循环遍历 jQuery 数组/将值输出到 div

问题描述

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

输入 1 的数据：字符串 输入 2 的数据：数字 (float) (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 返回，动态地将更多数据添加到数组中没有任何作用。

我想达到什么目标？

我希望这是有道理的，并提前感谢。

标签： javascriptjqueryarrays

解决方案

Ok, so assuming that you don't have a problem getting the arrays you need, the problem lies within your for loop.

YOUR CODE:

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. You put everything in the for loop, yet make no reference to the index. I'm assuming everywhere you put [0] you actually want [i]. This means that every time the index increases, you are getting the next array element.

    1. You should use .append instead of .html. .html means that the current html will be replaced by what you are adding.

    2. Finally, although making it dynamic is possible, I'm not sure that JQuery is the best libary to use in this case. I'd suggest taking a look at libraries such as Vue or MoonJs (both are very light and very simple libraries) etc... to find a much easier, and frankly better way to do this. They allow for dynamic rendering, and what you are trying to do becomes insanely simplified.

Hope this helps.

(hopefully) WORKING CODE:

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

推荐阅读