0

I'm trying to iterate through a element using this code:

$.each(element, function(index, item) {
    ...
});

I check element type by executing this command $.type(element) in Chrome console and I got "object" as output. I check also what has element inside using this command element and got this as output:

[<input type=​"text" name=​"input_color_5[]​" class=​"field_color" data-selector=​"color" data-id=​"color_5" placeholder=​"Color">​]

Also I tried all this command from console:

element.val() -> return ""
element.attr('data-selector') -> return "color"   
element.attr('data-id') -> return "color_5"

If I use instead this other code:

element.each(function(index, item) {
    ...
});

Then the error turn on:

Uncaught TypeError: Cannot call method 'each' of undefined

This is how I construct element object:

function getDivId() {
    var inputValues = [];
    inputValues.push($('#choices_picker input[type="text"]'));
    return inputValues;
}

And I call later in this way:

$('#choices_picker').on("click", "#create-variation", function(e) {
    var parent_id = $(this).closest("section").attr("id");
    var element = getDivId(parent_id);

    $('#variations_holder').show();
    $('#variations_holder').html("");
    html = "";
    iterateChoices("", element[0], element.slice(1), 0);
    $('#variations_holder').append(html);
});

And finally this is the function iterateChoices():

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

            if (choices.length > 0) {
                iterateChoices(row + '<input disabled="disabled" value="' + item.value + '"></div>', choices[0], choices.slice(1), counter + 1);
            }
        });
    } else {
        html_temp = "";
        element.each(function(index, item) {
            html_temp += row + '<input value="' + item.value + '" disabled="disabled"><br>';
        });
        html += html_temp;
    }
}

Then I ask myself, isn't element a object since I got the error? What is wrong or what I'm doing wrong?

UPDATE

After read the suggestions by users and identify where the problem was I will explain what I'm trying to do:

  1. I have several or just one div's under a wrapper div, this wrapper is #choices_picker
  2. Inside each div I can have one input or more than one
  3. In this step I need to build variations with each input element, for example is I have 3 inputs with values S, M, L then I need to generate something like this: 
<input name="upc" /><input name="qty" /><input name="price" /><input name="" value="S" />
<input name="upc" /><input name="qty" /><input name="price" /><input name="" value="M" />
<input name="upc" /><input name="qty" /><input name="price" /><input name="" value="L" />
  1. Another approach is for example is I have 4 inputs separated by div with values S, M, L and Red then I need to generate something like this:
<input name="upc" /><input name="qty" /><input name="price" /><input name="" value="S" /><input name="" value="Red" />
<input name="upc" /><input name="qty" /><input name="price" /><input name="" value="M" /><input name="" value="Red" />
<input name="upc" /><input name="qty" /><input name="price" /><input name="" value="L" /><input name="" value="Red" />

PS: Take into account that I'll never know how many DIV's or how many INPUT's I'll have since they are created on the fly when user clicks a button

4

1 回答 1

1

试试这个。

 var element = $("#"+parent_id);

它会将元素作为 jQuery 对象返回，然后您可以对其进行操作。

于 2013-09-18T18:52:34.210 回答