Django模板生成多隐藏输入，jQuery仅能获取首个值的问题

哦，这个问题我太熟了——你踩了HTML里最基础的规则红线：同一个页面里的id属性值必须是唯一的！

你在Django模板里通过循环生成了多个<input id='mortgages_counter'>，但浏览器在解析时只会识别第一个匹配该id的元素，后续同名id的元素都会被忽略。这就是为什么你的jQuery代码$( "#mortgages_counter" ).each(...)只能拿到第一个元素，length显示为1的核心原因。

方案1：改用class属性（最推荐） #

把模板里的id换成class，class本身就是用来标识一组同类型元素的：

{% for m in mortgages %}
<input class='mortgages_counter' name='mortgages_counter' type='hidden' value='{{ m.MonthlyPaid }}'>
{% endfor %}

然后修改jQuery代码，用class选择器遍历：

$( ".mortgages_counter" ).each( function( index, element ){
    console.log( $( this ).val() );
});

方案2：利用已有的name属性 #

你已经给输入框设置了name='mortgages_counter'，而name允许重复，直接通过name选择器遍历即可：

$( "input[name='mortgages_counter']" ).each( function( index, element ){
    console.log( $( this ).val() );
});

这种方式不需要修改模板代码，只改jQuery就能解决，非常高效。

方案3：给id添加唯一后缀（适合需单独定位元素的场景） #

如果之后需要单独操作某个隐藏输入框，可以给id加上循环索引保证唯一性：

{% for m in mortgages %}
<input id='mortgages_counter_{{ forloop.counter }}' name='mortgages_counter' type='hidden' value='{{ m.MonthlyPaid }}'>
{% endfor %}

然后用属性前缀选择器遍历所有相关元素：

$( "input[id^='mortgages_counter_']" ).each( function( index, element ){
    console.log( $( this ).val() );
});

修改完成后，你可以在控制台打印$( ".mortgages_counter" ).length（对应方案1），应该会显示2，而且each循环能正常输出两个MonthlyPaid的值，问题就彻底解决啦！

内容的提问来源于stack exchange，提问作者Igor Tischenko