使用jQuery创建多步骤模态框：动态多类Div内容追加问题

我帮你找到了两个核心问题，导致你无法将input追加到目标div中：

1. jQuery选择器写法错误 #

你原来的选择器$(".modal-body .step .step-" + key)使用了空格分隔类名，这意味着jQuery会去寻找**.modal-body后代中的.step元素，再找该元素后代中的.step-${key}元素**，但实际上这三个类是属于同一个div的（class="modal-body step step-${key}"）。正确的多类选择器应该是将类名直接连在一起，不需要空格：

$(".modal-body.step.step-" + key)

2. 操作未插入DOM的元素 #

你是先在内存中拼接modal的HTML字符串，然后在循环过程中尝试用jQuery选择器去操作这些元素——但此时这些元素还没有被插入到页面的DOM中，jQuery自然找不到它们，所以append操作无效。

修正后的完整代码 #

我们可以调整逻辑，在构建每个step的body元素时，直接把input内容拼接到字符串中，这样就不需要依赖jQuery去操作未插入DOM的元素；同时修正选择器（如果后续需要操作已插入的元素）：

var testCaseNames = ['test1', 'test2']; 
var inputs = ['test3', 'test4']; 

// 初始化modal基础结构
var modal = '<form class="modal multi-step" id="creationModal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"></div><div class="modal-footer"></div>';

$.each(testCaseNames, function(key, value) {
    console.log(key + ": " + value);
    console.log(inputs);

    // 添加标题
    $('.modal-header').append('<h4 class="modal-title step-' + key + '" data-step="' + key + '">' + value + '</h4>');

    // 构建当前step的body内容：先创建div，再把inputs拼进去
    var stepBody = '<div class="modal-body step step-' + key + '" data-step="' + key + '">';
    // 遍历inputs，拼接到stepBody中
    $.each(inputs, function(index, input) {
        stepBody += input; // 这里如果input是HTML字符串，直接拼接即可
    });
    stepBody += '</div>';
    // 把构建好的stepBody追加到modal-content
    modal += stepBody;

    // 添加页脚按钮
    modal += '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
    modal += '<button type="button" class="btn btn-primary step step-' + key + '" data-step="' + key + '" onclick="sendEvent(\'#creationModal\', 1)">Continue</button>';
});

// 闭合modal结构
modal += '</div></div></form>';

// 把modal插入到DOM中
$('#modalDiv').empty().append(modal);

额外说明 #

如果你后续需要对已插入DOM的step元素进行操作，确保在$('#modalDiv').append(modal)之后再执行，这时候jQuery就能正确找到目标元素了。比如：

// 插入modal后再操作
$('#modalDiv').empty().append(modal);
$.each(testCaseNames, function(key, value) {
    $.each(inputs, function(index, input) {
        $(".modal-body.step.step-" + key).append(input);
    });
});

这样就能解决你遇到的问题啦！

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