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:
- I have several or just one div's under a wrapper div, this wrapper is
#choices_picker
- Inside each div I can have one input or more than one
- 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" />
- 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