javascript - 在 for 循环中仅创建 Accordion 的内容

Question

我正在尝试在 for 循环中创建 Accordion 的内容部分，并预先打印标题。这是我尝试过的:

$("#right").append(
        "Team Leaders"
        + "<h4>Goals</h4>"
        + "<div><p>"
    );
    for (var i = 0; i < 5; i++) {
        $("#right").append(
            topGoals[i].name
            + ": "
            + topGoals[i].goals
            + "<br>"
        );
    }
    $("#right").append("</p></div>");
    $("#right").accordion();

但是，这没有用。 “Goals”部分确实显示为 Accordion 标题，但其中的内容是空的，并且 for 循环生成的内容出现在 Accordion 下方。

我之前在 for 循环中创建过 Accordion ，没有遇​​到任何问题，但我从未尝试过将标题放在循环之外。我在这里做错了什么吗？

编辑:

screen.js 中的 topGoals 数组:

var topGoals = getTopFiveGoals(myTeam);

该函数位于functions.js中:

function getTopFiveGoals(team) {
var tempTeam = team.players.slice();
tempTeam.sort(function(a, b) {
    return b.goals-a.goals;
});
tempTeam.splice(5, 15);
return tempTeam;
}

Answer 1

您多次修改 DOM 树，而是在内存中创建一个 dom 元素并附加所有子元素。最后将其附加到实时 DOM 树中。在您的代码中，标签未正确关闭，因此无法正确生成。jQuery会自动关闭诸如<div><p>之类的标签未正确关闭。

$("#right").append(
        "Team Leaders"
        + "<h4>Goals</h4>"
    );
    var $div = $("<div></div>");
    for (var i = 0; i < 5; i++) {
        $div.append("<p>"+
            topGoals[i].name
            + ": "
            + topGoals[i].goals
            + "</p><br>"
        );
    }
    $("#right").append($div);
    $("#right").accordion();