Question

JQuery v1.7.2

I’m adding elements to the screen after the user makes a selection from a dropdown. I’m doing this w/ .append():

var html = '<li><input type="hidden" name="hidden_' + ID + '" id="hidden_' + ID + '" value="' + ID + '"/><p>' + Name + '<a href="#" onClick="remove($(this));">Close</a></p></li>'
$('#sortable').append(html);

When the form is submitted I need to go through each of the hidden fields and get their value and current order (the user can move them up and down the page). I’m trying to do this w/ .index():

$('#sortable input:hidden[id*="hidden_"]').each(function(){
    alert($(this).val());
    alert($(this).index());
}); 

When I run this code, the value is coming through fine, but the index is always 0. I tried wrapping it all in

$(function () {
    $("#create").on("submit", function (event) {
    });
});

but that didn’t work either.

Is there something I’m doing wrong, or is this happening because I appended the elements?

Answer 1

The first parameter of each function is the index of current loop.

.each( function(index, Element) )

$('#sortable input:hidden[id^="hidden_"]').each(function(index){
    alert(this.value);
    alert(index);
});