jquery append() 正在创建两个 div 元素

Question

我正在使用 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>");
        }
    }
}]);

HTML 文件

<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>
    </div>

json文件

[{"id":1,"missionInfo":"mission"},{"id":2,"missionInfo":"mission1"},{"id":3,"missionInfo":"mission2"},{"id":4,"missionInfo":"mission3"}]

Answer 1

既然用过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>

然后

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;


}]);

Answer 2

首先，我在您的 javascript 代码中发现了一个可能的错字。

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

我相信你想要的是 $scope.missions[i].missionInfo。除此之外，您的代码应该没问题。

其次，在角度世界中，迭代的正常方法是使用 ng-repeat（请参阅 Arun 的回答）。您的视图和控制器不应该相互认识，它们应该通过您的模型进行通信。

Answer 3

Inside Loop 试试这个代码：

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);

代码未经测试。测试一下，然后告诉我。