为什么它为div创建相同的数组

时间:2014-06-20 10:11:13

标签: jquery

任何人都可以告诉我为什么它为orderdiv ul的div创建相同的数组(toppings)。

在我的情况下,草莓在Topping-details类下没有任何元素。

但它为两者创造了相同的价值

在我的情况下,草莓在Topping-details下没有任何元素,Chocolate在Topping-details下有数据,但同时为这两个div创建了数组。

这是jsfiddle http://jsfiddle.net/RD3HZ/5/

这是我目前正在遵循的逻辑

$.each($('#ordersdiv ul'), function (i, elem) {
    name = $(elem).find("label").text();
    toppings = [];
    $('#ordersdiv .Topping-details .tdHeading').each(function () {
        values = [];
        $(this).parent().find('.tpActive').each(function () {
            values.push($(this).text());
        });
        toppings.push({
            'name': $(this).text(),
                'value': values
        });
    });
    products.push({
        'name': name,
            'toppings': toppings
    });
});

我期待输出应该是

[
    {
        "name": "Strawberry",
        "toppings": []
    },
    {
        "name": "Chocolate",
        "toppings": [
            {
                "name": "Chocolate0",
                "value": [
                    "Honey Sauce  10 ML",
                    "Caramel Sauce  10 ML"
                ]
            },
            {
                "name": "Chocolate1",
                "value": [
                    "Honey with Carmel  10 ML"
                ]
            }
        ]
    }
]

有人可以帮忙吗

2 个答案:

答案 0 :(得分:1)

HTML代码中有2 ul个,在每个循环中,$('#ordersdiv .Topping-details .tdHeading')返回相同的元素集合。因此你的问题。您必须选择与 相关的.tdHeading 当前ul元素。我认为应该重新组织您的HTML代码以使这种关系更好。但是,使用当前的HTML代码,您可以更改.tdHeading选择代码:

$('#ordersdiv .Topping-details .tdHeading')    

到此:

$(this).closest('.product-item').next('.Topping-details').find('.tdHeading')

Updated demo.

答案 1 :(得分:0)

我试图获得您的预期输出...只需检查

var name;
var values = [];
var toppings = [];
var products = [];
$.each($('#ordersdiv ul'), function (i, elem) {
    name = $(elem).find("label").text();
    toppings = [];

    $('.Topping-details .tdHeading',$(elem).parent().parent()).each(function () {
        values = [];
        val = $(this).text();
        $(this).parent().find('.tpActive').each(function () {

                values.push($(this).text());
        });
        if(val.indexOf(name)> -1)
        toppings.push({
            'name': $(this).text(),
                'value': values
        });
    });
    products.push({
        'name': name,
            'toppings': toppings
    });
});

alert(JSON.stringify(products));

检查小提琴http://jsfiddle.net/kka284556/RD3HZ/8/