Javascript jQuery数据列表

我有一系列可编辑的列表，只要按一下按钮，这些列表就会转换成某种数据结构。当它被转换成某种类型的数据时，我需要将副本添加到一起

例如：

• 200克香蕉
• 100克苹果
• 200克苹果

应转换为某种类型的数据列表，最终应如下所示：

$(".calculate").bind("click", function(e)
{
    var fruits = {};

    //get the correct parent of the button
    var parent = $(this).closest("#calc");

    //get relevant data
    parent.find(".options").each(function(index, element)
    {
        var opt1 = $(this).children(".opt1").children("input").val(); //weight
        var opt2 = $(this).children(".opt2").children("input").val(); //ingredient

        // here is my code
        if(fruits[opt2] == undefined) {
            fruits[opt2] = opt1;
        } else {
            // assuming that opt1 is an integer
            fruits[opt2] += opt1;
        }
    });

    // use fruits variable here
});

• 200克香蕉
• 300克苹果

以下是我的尝试：

//button click event
$(".calculate").bind("click", function(e)
{
    //get the correct parent of the button
    var parent = $(this).closest("#calc");

    //get relevant data
    parent.find(".options").each(function(index, element)
    {
        var opt1 = $(this).children(".opt1").children("input").val(); //weight
        var opt2 = $(this).children(".opt2").children("input").val(); //ingredient
    });
});

基本上，我点击按钮，上面的脚本就会找到所有相关的数据

如何将其转换为多维数组或可以在其中搜索重复项的对象列表

当我尝试创建一个动态对象时，它似乎失败了；当我创建一个多维数组来搜索时，我被inArray无法搜索它们所阻止

问题概述：

---

我可以得到用户数据没有问题。将其转换为列表并将重复项添加在一起是个问题。

我建议您使用一个包含摘要的全局对象，如下所示：

$(".calculate").bind("click", function(e)
{
    var fruits = {};

    //get the correct parent of the button
    var parent = $(this).closest("#calc");

    //get relevant data
    parent.find(".options").each(function(index, element)
    {
        var opt1 = $(this).children(".opt1").children("input").val(); //weight
        var opt2 = $(this).children(".opt2").children("input").val(); //ingredient

        // here is my code
        if(fruits[opt2] == undefined) {
            fruits[opt2] = opt1;
        } else {
            // assuming that opt1 is an integer
            fruits[opt2] += opt1;
        }
    });

    // use fruits variable here
});

---

这里还有另一个变体，它还可以进行一些简单的解析，以防将

100g

作为输入，而不是

100

。此外，每次都会重新初始化数据结构，因此每次单击都不会使所有内容加倍

$(".calculate").bind("click", function(e)
{
    //get the correct parent of the button
    var parent = $(this).closest("#calc");

    var ingredients = {};

    var extractWeight = function (input) {
        // you can add other logic here
        // to parse stuff like "1kg" or "3mg"

        // this assumes that everything is
        // in grams and returns just the numeric
        // value
        return parseInt(input.substring(0, input.length - 1));
    }

    //get relevant data
    parent.find(".options").each(function(index, element)
    {
        var opt1 = $(this).children(".opt1").children("input").val(); //weight
        var opt2 = $(this).children(".opt2").children("input").val(); //ingredient

        // initialize to 0 if not already initialized
        ingredients[opt2] = ingredients[opt2] ? ingredients[opt2] : 0;
        ingredients[opt2] += extractWeight(opt1);
    });
});​

以下是一些提示：

• {}

  称为对象文字，用于创建新的空对象
• 可以通过

  []

  符号动态访问对象成员（即，如果

  x==“name”

  则

  o[x]==“o.name

  ）
• 变量在范围内处于相同级别或更深级别的函数中是可见的-就像在我的示例中，我在

  每个
  函数中使用
  成分
  

• JavaScript中的数组只支持数字键，所以不会有PHP的“关联数组”之类的东西。对象填补了JS中的这一空白

---

这里有一个JSFIDLE，可以满足您的需求：）

它有两个输入，一个用于项目名称，另一个用于金额。单击“添加”时，它会检查一个对象，以查看该项是否已添加。如果是，它会根据您的输入增加该项目的金额。如果没有，它将按您指定的金额添加该项目。然后，它将使用“商店”中的所有项目构建ul

---

请注意，这是一个快速而肮脏的示例，因此没有进行类型检查或验证：）

您能为我们介绍一下吗？您能不能也展示一下您的html示例，以便我们更好地了解发生了什么。最好将一个简单的jsfiddle.net放在一起来说明这个问题意味着使用了重复的ID，说它不是真的。不要担心Mark，它只有在我清理代码并添加一个类之前才会出现。+1'ed仅用于Carly Rae Jepsen引用。您应该注意在何处声明结果对象。如果将其设置为全局，则每次单击时，数量都会累计。您至少应该重置处理程序中的变量。这似乎可以用于创建数据列表！但是没有检查元素是否已经在列表中，如果已经在列表中，请将它们添加到一起。查看

else

语句，有一个+=operatorAh..在第二次运行时，值为NaN-我这边一定是个bug，谢谢您的帮助@haynar，你说得对，但变量范围对JavaScript初学者来说并不明显。除了变量初始化问题，你的答案和我的一样好。如果你修改你的答案并修正它，我将删除否决票。干杯！：）这是一把很好的小提琴，杰森；但是，它不能解决通过数据列表创建和排序的实际问题。不过，我很感激你的回答，其他人很可能会利用你的例子！：）谢谢你的帮助，harynar的回答最能帮助我解决问题，但你的解释也很有帮助。不幸的是，我不能把两个作为答案，所以我会给你的打分，谢谢你：）