Javascript jquery append（）正在创建两个div元素

我使用jquery append（）将div元素动态添加到DOM中。我制作了一个控制器，它使用$http.get（）获取json数据，并调用函数create_mission将div添加到DOM中。我必须为json的每个对象创建一个div，所以我使用了一个循环并将其迭代json.length次。但在这里，每次迭代都会创建两个div元素

这是我的控制器

mission_vision_mod.controller('mission_visionCtrl', ['$scope', '$http', function ($scope, $http) {
    $scope.visiontext = "Here is the content of vision";
    $scope.bkclr = ['bk-clr-one', 'bk-clr-two', 'bk-clr-three', 'bk-clr-four'];
    $scope.progressbar = ['progress-bar-warning', 'progress-bar-danger', 'progress-bar-success', 'progress-bar-primary'];
    $scope.missioncount = ['col-md-0', 'col-md-12', 'col-md-6', 'col-md-4', 'col-md-3', 'col-md-2.5', 'col-md-2'];

    $http.get('m_id.json').success(function (data) {
        $scope.missions = data;
        $scope.len = data.length;
        create_mission();
    });

    var create_mission = function () {
        var i;
        for (i = 0; i < $scope.missions.length; i++) {
            $("#missionstart").append("<div id='" + $scope.missions[i].id + "' class='" + $scope.missioncount[$scope.missions.length] + "'></div>");
            $("#missionstart").find("#" + $scope.missions[i].id + "").append("<div class='dashboard-div-wrapper " + $scope.bkclr[i] + "'></div>");
            $("div#" + $scope.missions[i].id + "").find(".dashboard-div-wrapper").append("<h1>" + $scope.missions[0].missionInfo + "</h1>");
            $("div#" + $scope.missions[i].id + "").find(".dashboard-div-wrapper").append("<div class='progress progress-striped active'></div>");
            $("div#" + $scope.missions[i].id + "").find(".dashboard-div-wrapper").find("div").append("<div class='progress-bar " + $scope.progressbar[i] + "' role='progressbar' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100' style='width: 80%'></div>");
            $("div#" + $scope.missions[i].id + "").find(".dashboard-div-wrapper").append("<ul class='unorderedlist'></ul>");
        }
    }
}]);

---

因为您已经使用了angularjs，所以请使用angularjs解决方案

<div class="content-wrapper" ng-controller="mission_visionCtrl">
    <div class="container-fluid">
        <div id="header-wrapper" class="container">
            <div id="header" class="container">
                <div id="logo">
                    <h1 class="page-head-line" id="visionh"><a>Vision</a></h1>
                    <p id="visionp"><a rel="nofollow">{{visiontext}}</a></p>
                </div>
            </div>
        </div>
        <div class="row" id="missionstart">
            <div id="{{mission.id}}" ng-class="missioncount[missions.length]" ng-repeat="mission in missions">
                <div class="dashboard-div-wrapper" ng-class="bkclr[$index]">
                    <h1>{{mission.missionInfo}}</h1>
                    <div class="progress progress-striped active">
                        <div class="progress-bar" ng-class="progressbar[$index]" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"></div>
                    </div>
                    <ul class="unorderedlist"></ul>
                </div>
            </div>
        </div>
    </div>
</div>

---

首先，我在您的javascript代码中发现了一个可能的输入错误

$("div#" + $scope.missions[i].id + "").find(".dashboard-div-wrapper").append("<h1>" + $scope.missions[0].missionInfo + "</h1>");

$（“div#“+$scope.missions[i].id+”）.find（“.dashboard div wrapper”）.append（“+$scope.missions[0].missionInfo+”）；

我相信你想要的是$scope.missions[I].missionInfo。除此之外，您的代码应该很好

---

其次，在角度世界中，迭代的正常方式是使用ng repeat（请参见Arun的答案）。视图和控制器不应该相互了解，它们应该通过模型进行通信

内部循环尝试以下代码：

var div2=$("div></div>").addClass("dashboard-div-wrapper "+$scope.bkclr[i]);
        div2.append("<h1>" + $scope.missions[0].missionInfo + "</h1>");
        div2.append($("<div></div>").addClass("progress progress-striped active").append("<div class='progress-bar " + $scope.progressbar[i] + "' role='progressbar' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100' style='width: 80%'></div>"));
        div2.find(".dashboard-div-wrapper").append("<ul class='unorderedlist'></ul>");

            var div1=$("<div></div>").id($scope.missions[i].id).addClass($scope.missioncount[$scope.missions.length]).append(div2);
            $("#missionstart").append(div1);

var div2=$（“div>”）.addClass（“仪表板div包装器”+$scope.bkclr[i]）；
div2.append（“+$scope.missions[0].missionInfo+”）；
div2.append（$（“”）.addClass（“进度条带化活动”）.append（“”）；
div2.find（“.dashboard div wrapper”）.append（
”；
var div1=$（“”）.id（$scope.missions[i].id）.addClass（$scope.missioncount[$scope.missions.length]）.append（div2）；
$（“#任务开始”）。追加（第1部分）；

---

未测试的代码。测试它并让我知道。

从for循环中的每一行中删除“”，然后重试。从循环中的每一行中删除元素后，它仍然不工作。请一次调试一行，然后查看问题所在。你确定函数

create\u mission

只被调用一次吗？是的，函数create\u mission只被调用一次，我想问题在于这行

$（“#missionstart”）。append（“”）。这行一执行，两个div就被创建了，谢谢。但是你能解释一下为什么它对我们不起作用吗jquery@VikramSinghJadon我无法重新创建问题，因为它无法使用此代码，DOM元素不可见
mission_vision_mod.controller('mission_visionCtrl', ['$scope', '$http', function ($scope, $http) {
    $scope.visiontext = "Here is the content of vision";
    $scope.bkclr = ['bk-clr-one', 'bk-clr-two', 'bk-clr-three', 'bk-clr-four'];
    $scope.progressbar = ['progress-bar-warning', 'progress-bar-danger', 'progress-bar-success', 'progress-bar-primary'];
    $scope.missioncount = ['col-md-0', 'col-md-12', 'col-md-6', 'col-md-4', 'col-md-3', 'col-md-2.5', 'col-md-2'];

    $http.get('m_id.json').success(function (data) {
        $scope.missions = data;
        $scope.len = data.length;
    });

    $scope.missions = data;
    $scope.len = data.length;


}]);

$("div#" + $scope.missions[i].id + "").find(".dashboard-div-wrapper").append("<h1>" + $scope.missions[0].missionInfo + "</h1>");

var div2=$("div></div>").addClass("dashboard-div-wrapper "+$scope.bkclr[i]);
        div2.append("<h1>" + $scope.missions[0].missionInfo + "</h1>");
        div2.append($("<div></div>").addClass("progress progress-striped active").append("<div class='progress-bar " + $scope.progressbar[i] + "' role='progressbar' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100' style='width: 80%'></div>"));
        div2.find(".dashboard-div-wrapper").append("<ul class='unorderedlist'></ul>");

            var div1=$("<div></div>").id($scope.missions[i].id).addClass($scope.missioncount[$scope.missions.length]).append(div2);
            $("#missionstart").append(div1);