Question

I have parent and child elements structure:

<div id="container">
 <input type="hidden" id="child-1" value="1" />
 <input type="hidden" id="child-8" value="1" />
 <input type="hidden" id="child-9" value="1" />
 <input type="hidden" id="child-3" value="1" />
</div> 

I need to select children and change their values.

The result should be:

<div id="container">
 <input type="hidden" id="child-1" value="1" />
 <input type="hidden" id="child-8" value="2" />
 <input type="hidden" id="child-9" value="3" />
 <input type="hidden" id="child-3" value="4" />
</div> 

JQuery:

$("#container").children().each(function(n){
 $('input[type=hidden]').val(n); 
});

My query code gives no wanted result, because it always
changes input hidden value to 4. I know why it makes so,
but I can’t find any other better solution. So any help
would be appreciated.

Answer 1

$("#container input[type=hidden]").each(function(index){
    $(this).val(index + 1);
});

try this