jQuery点击按钮无法获取对应class为indice的input文本框正确值

问题原因 #

你所有的条目都放在了同一个<form>标签内，原有代码中.parent().parent().parent('form').find('.indice')会匹配到整个表单下所有.indice类的输入框，而jQuery的val()方法默认只会返回第一个匹配元素的值，这就是你始终拿到第一个输入框值的原因。
同时硬数parent()层级的写法健壮性很差，后续如果调整HTML嵌套结构，很容易出现找不到父元素的问题。

解决方案 #

直接通过当前点击按钮的父级容器定位对应输入框，不需要遍历到form层，代码更稳定：

$(document).ready(function(){
    $('.cl-button').on('click', function(e){
        e.preventDefault();
        var id =  $(this).attr('rel');
        // 替换原有indice取值逻辑
        var indice = $(this).closest('.col-md-2.h').prev().find('.indice').val();
        // 建议直接传对象，避免拼接字符串的转义问题
        var data_1 = {
            id: id,
            indice: indice
        };
        $.ajax({
            type: "POST",
            data: data_1,
            url: "php/save_index.php"
        })
        .done(function() {
            $('#myModal').modal('show');
        });      
    });
});

逻辑说明 #

• closest('.col-md-2.h')：从触发点击的按钮向上查找，匹配最近的包含col-md-2和h类的父容器，也就是按钮所在的列
• prev()：匹配当前列的上一个同级列，正好是存放.indice输入框的列
• find('.indice').val()：只会查找当前列内的输入框，不会匹配到其他条目的输入框，完全符合你的需求

内容的提问来源于stack exchange，提问作者P.Davide