克隆HTML template后用jQuery find设置input值失败，求正确实现方式

你用$input_group.find('input')定位控件后赋值的思路本身是正确的，但代码里的几处错误导致赋值未生效，同时存在DOM ID重复的隐患，以下是具体修正方案和替代实现：

一、现有代码的问题与修正 #

错误点： #

1. 最后一行$('input_group').val(PartsValues.QuestionValue)完全错误：选择器'input_group'会查找不存在的<input_group>标签，且完全没必要在append后重复赋值，直接删除该行。
2. 模板中所有元素ID固定（如fieldrowItem_1），循环克隆会生成多个相同ID的DOM元素，违反HTML规范，后续操作会出现异常。
3. 未确认PartsValues.QuestionValue是否有有效值，需先校验数据再赋值。

修正后的代码： #

var $container = $('#gridrow-field-container');
var template = $('#gridrow-template-input-group').get(0);

$(item.MeetingPollingPartsValues).each((indexPartsValues, PartsValues) => {
    // 克隆模板内容转为jQuery对象
    var $input_group = $(template.content.cloneNode(true));
    // 通过类选择器精准定位input，避免ID冲突
    var inputControl = $input_group.find('input.fieldrowItem');
    
    // 确认数据存在时再赋值
    if (PartsValues.QuestionValue) {
        inputControl.val(PartsValues.QuestionValue);
    }
    
    // 动态生成唯一ID，避免重复
    const rowIndex = indexPartsValues + 1;
    inputControl.attr('id', `fieldrowItem_${rowIndex}`);
    $input_group.find('#newrowItem_1').attr('id', `newrowItem_${rowIndex}`);
    $input_group.find('#spanrowItem_1').attr('id', `spanrowItem_${rowIndex}`);
    
    $container.append($input_group);
});

二、其他可行实现方法 #

方法1：使用原生DOM API操作 #

无需依赖jQuery的find，直接用原生querySelector定位控件赋值，性能更优：

var $container = $('#gridrow-field-container');
var template = $('#gridrow-template-input-group').get(0);

$(item.MeetingPollingPartsValues).each((indexPartsValues, PartsValues) => {
    var fragment = template.content.cloneNode(true);
    var inputControl = fragment.querySelector('input.fieldrowItem');
    
    if (PartsValues.QuestionValue) {
        inputControl.value = PartsValues.QuestionValue;
    }
    
    // 动态修改ID
    const rowIndex = indexPartsValues + 1;
    inputControl.id = `fieldrowItem_${rowIndex}`;
    fragment.querySelector('#newrowItem_1').id = `newrowItem_${rowIndex}`;
    fragment.querySelector('#spanrowItem_1').id = `spanrowItem_${rowIndex}`;
    
    $container.append(fragment);
});

方法2：使用模板字符串拼接HTML #

对于简单结构，直接拼接带值的HTML字符串，代码更直观：

var $container = $('#gridrow-field-container');

$(item.MeetingPollingPartsValues).each((indexPartsValues, PartsValues) => {
    const rowIndex = indexPartsValues + 1;
    const questionValue = PartsValues.QuestionValue || '';
    const html = `
        <div class='row mb-3' id='newrowItem_${rowIndex}'>
            <div class="input-group">
                <input type='text' id='fieldrowItem_${rowIndex}' name='name[]' 
                       class='form-control fieldrowItem mb-3' 
                       placeholder="Row ${rowIndex}" data-value="0" 
                       value="${questionValue}">
                <span id='spanrowItem_${rowIndex}' class="input-group-addon" 
                      style="cursor:pointer;" onclick="RemoveRow(this)">
                    <i class="fa fa-remove" style="color:#CDCDCD"></i>
                </span>
            </div>
        </div>
    `;
    $container.append(html);
});

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