Jquery中第二个for循环无法追加DOM内容问题求助

问题详情 #

代码里遍历Student.grade的for循环没法把成绩内容加到页面上，虽然console.log能正常打出grade的数据，试了after、prepend这些方法都不管用。

相关代码 #

static render(Students) {
        this.Students = Students;
        $('#app').empty();
        for (let Student of Students) {
            $("#app").prepend(
                `<div id="${Student.id}" class="card">
                    <div class="card-header">
                        <h2>${Student.name}</h2>
                        <button class="btn btn-danger" onClick="DomManager.deleteStudent('${Student.id}')">Delete</button>
                    </div>
                    <div class='card-body'>
                        <div class="card">
                            <div class='row'>
                                <div class="col-sm">
                                    <input type='text' id="${Student.id}-subject" class='form-control' placeholder="Subject Name">
                                </div>
                                <div class="col-sm">
                                    <input type='text' id="${Student.id}-grade" class='form-control' placeholder="Grade Name">
                                </div>
                            </div>
                            <button id="${Student.id}-new-grade" onclick="DomManager.addGrade('${Student.id}')" class="btn btn-primary form-control">add</button>
                        </div>
                    </div>
                </div><br>
                `
            );
            console.log(Student)
            for (let grade of Student.grade) {
                $(`#${Student.id}`).find('.card-body').append(
                    `<p>
                    <span id="subject-${Student.id}"><strong>Subject:</strong> ${grade.subject}</span>
                    <span id="grade-${Student.id}"><strong>Grade:</strong> ${grade.grade}</span>
                    <button class="btn btn-danger" onclick="DomManager.deleteGrade('${Student.id}', '${grade.subject}')">Delete Grade</button>
                    </p>
                    `
                )
                console.log(grade)
            }
        }
    }

问题原因 #

最关键的错误是学生卡片的id属性语法写错了：原代码里写的是id=${Student.id}"，这会生成错误的id值（比如Student.id是1的话，实际生成的id是1"，带了多余的引号），导致后面$('#${Student.id}')根本找不到对应的DOM元素，自然没法把成绩内容追加进去。另外要确保遍历grade的循环有闭合的}，原代码片段里没显示，结构不完整也会导致执行异常。

修复方案 #

1. 修正卡片id的语法，把id=${Student.id}"改成id="${Student.id}"，确保生成的id是正确的无多余引号的格式。
2. 检查代码结构，确保遍历grade的for循环有闭合的}，以及外层的学生遍历循环也完整闭合。

优化建议 #

可以把学生卡片的HTML和成绩内容先拼接成一个字符串，再一次性插入DOM，减少多次DOM操作，提升性能，同时避免元素查找失败的问题：

static render(Students) {
    this.Students = Students;
    $('#app').empty();
    for (let Student of Students) {
        // 先拼接学生卡片的基础HTML
        let cardHtml = `<div id="${Student.id}" class="card">
            <div class="card-header">
                <h2>${Student.name}</h2>
                <button class="btn btn-danger" onClick="DomManager.deleteStudent('${Student.id}')">Delete</button>
            </div>
            <div class='card-body'>
                <div class="card">
                    <div class='row'>
                        <div class="col-sm">
                            <input type='text' id="${Student.id}-subject" class='form-control' placeholder="Subject Name">
                        </div>
                        <div class="col-sm">
                            <input type='text' id="${Student.id}-grade" class='form-control' placeholder="Grade Name">
                        </div>
                    </div>
                    <button id="${Student.id}-new-grade" onclick="DomManager.addGrade('${Student.id}')" class="btn btn-primary form-control">add</button>
                </div>`;
        
        // 拼接成绩内容
        for (let grade of Student.grade) {
            // 给成绩的span加唯一id，避免同一学生下多个成绩id重复
            cardHtml += `<p>
                <span id="subject-${Student.id}-${grade.subject}"><strong>Subject:</strong> ${grade.subject}</span>
                <span id="grade-${Student.id}-${grade.subject}"><strong>Grade:</strong> ${grade.grade}</span>
                <button class="btn btn-danger" onclick="DomManager.deleteGrade('${Student.id}', '${grade.subject}')">Delete Grade</button>
            </p>`;
        }
        
        // 闭合卡片标签
        cardHtml += `</div></div><br>`;
        
        // 一次性插入DOM
        $("#app").prepend(cardHtml);
    }
}

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