代码永远不会通过$ .each(元素,...)($ .each循环永远不会被调用)

时间:2013-09-18 14:57:23

标签: javascript jquery

我已经制作了这段代码:

function iterateChoices(row, element, choices, counter) {
    if ($.isArray(choices) && choices.length > 0) {
        element.each(function(index, item) {
            if (counter === 0) {
                row = '<div style="display:inline-block"><label style="display: inline-block">UPC:</label> <input style="display: inline-block" type="text" value="" name="pupc[]" /></div>';
                row += '<div style="display:inline-block"><label style="display: inline-block">Precio:</label> <input style="display: inline-block" type="text" value="" name="pprice[]" /></div>';
                row += '<div style="display:inline-block"><label style="display: inline-block">Cantidad:</label><input type="text" style="display: inline-block" value="" name="pqty[]" /></div>';
            }

            iterateChoices(row + '<div style="display:inline-block"><input style="display: inline-block" disabled="disabled" value="' + item.value + '"></div>', choices[0], choices.slice(1), counter + 1);
        });
        console.log("Counter: " + counter);
        console.log("Row: " + row);
    } else {
        html_temp = "";
        element.each(function(index, item) {
            html_temp += row + '<div style="display:inline-block"><input  style="display: inline-block" value="' + item.value + '" disabled="disabled"></div><br>';
        });
        html += html_temp;
    }
    console.log("html_temp: " + html_temp);
}

我测试element的值是什么:

$.isArray(element)
false

element.length
2

element
[
<input type=​"text" name=​"input_color[]​" class=​"field_color" data-id=​"color_5" placeholder=​"Color">​
, 
<input type=​"text" name=​"input_color[]​" class=​"field_color" data-id=​"color_5" placeholder=​"Color">​
]

$.each(element, function(index, item) { console.log(item) })
<input type=​"text" name=​"input_color[]​" class=​"field_color" data-id=​"color_5" placeholder=​"Color">​
<input type=​"text" name=​"input_color[]​" class=​"field_color" data-id=​"color_5" placeholder=​"Color">​

这是每个console.log()

的输出
html_temp: 
Counter: 1
Row: <div style="display:inline-block"><label style="display: inline-block">UPC:</label> <input style="display: inline-block" type="text" value="" name="pupc[]" /></div><div style="display:inline-block"><label style="display: inline-block">Precio:</label> <input style="display: inline-block" type="text" value="" name="pprice[]" /></div><div style="display:inline-block"><label style="display: inline-block">Cantidad:</label><input type="text" style="display: inline-block" value="" name="pqty[]" /></div><div style="display:inline-block"><input style="display: inline-block" disabled="disabled" value="Red"></div>
html_temp: 
html_temp: 
Counter: 1
Row: <div style="display:inline-block"><label style="display: inline-block">UPC:</label> <input style="display: inline-block" type="text" value="" name="pupc[]" /></div><div style="display:inline-block"><label style="display: inline-block">Precio:</label> <input style="display: inline-block" type="text" value="" name="pprice[]" /></div><div style="display:inline-block"><label style="display: inline-block">Cantidad:</label><input type="text" style="display: inline-block" value="" name="pqty[]" /></div><div style="display:inline-block"><input style="display: inline-block" disabled="disabled" value="Blue"></div>
html_temp: 
Counter: 0
Row: <div style="display:inline-block"><label style="display: inline-block">UPC:</label> <input style="display: inline-block" type="text" value="" name="pupc[]" /></div><div style="display:inline-block"><label style="display: inline-block">Precio:</label> <input style="display: inline-block" type="text" value="" name="pprice[]" /></div><div style="display:inline-block"><label style="display: inline-block">Cantidad:</label><input type="text" style="display: inline-block" value="" name="pqty[]" /></div>
html_temp:

由于某些原因,在实际代码中,它永远不会通过$.each(element, ...),我无法找到错误的位置,任何帮助或建议?

更新 我创建this Fiddle用于测试目的,它是如何工作的:

  1. 标记任何chekbox
  2. 为每组选项(颜色,talla)添加所需数量的输入
  3. 点击“创建变体”按钮
  4. 行为:如果您检查最新的复选框,则可以按照我的意愿运行,如果您没有,则代码停止并且永远不会得到我想要的结果

    更新2:

    我在调用函数时添加了一些console.log()语句并查看结果:

    function iterateChoices(row, element, choices, counter) {
        console.log("element: " + element);
        console.log("choices: " + choices);
        console.log("counter: " + counter);
        ...
    
    element:  
    [input.field_color, input.field_color, prevObject: x.fn.x.init[1], context: document, selector: "#color_choice_5 input:text", jquery: "1.10.2", constructor: function…]
    choices:  
    [x.fn.x.init[1], x.fn.x.init[0]]
    counter:  0
    element:  
    [input.field_talla, prevObject: x.fn.x.init[1], context: document, selector: "#talla_choice_6 input:text", jquery: "1.10.2", constructor: function…]
    choices:  
    [x.fn.x.init[0]]
    counter:  1
    element:  
    [prevObject: x.fn.x.init[1], context: document, selector: "#talla_choice_13 input:text", jquery: "1.10.2", constructor: function…]
    choices:  []
    counter:  2
    0
    element:  
    [input.field_talla, prevObject: x.fn.x.init[1], context: document, selector: "#talla_choice_6 input:text", jquery: "1.10.2", constructor: function…]
    choices:  
    [x.fn.x.init[0]]
    counter:  1
    element:  
    [prevObject: x.fn.x.init[1], context: document, selector: "#talla_choice_13 input:text", jquery: "1.10.2", constructor: function…]
    choices:  []
    counter:  2
    0
    

    真的不知道它失败的地方

0 个答案:

没有答案