jquery append()创建了两个div元素

I am adding div elements dynamically to the DOM using jquery append(). I have made a controller that takes json data using $http.get() and calls a function create_mission to add the divs to DOM. I have to create a div for every object of the json, so i have done it using a loop and iterating it for json.length times. But here two div elements gets created at every iteration.

我正在使用jquery append()向DOM动态添加div元素。我已经创建了一个控制器，它使用$http.get()获取json数据，并调用函数create_mission将div添加到DOM。我必须为json的每个对象创建一个div，因此我使用了一个循环并对json进行迭代。长时间。但是这里每次迭代都会创建两个div元素。

Here is my controller

这是我的控制器

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>");
        }
    }
}]);

The HTML file

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>

The json file

json文件

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

3 个解决方案

#1

Since you have used angularjs, use a angularjs solution

由于您已经使用了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>

then

然后

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;


}]);

#2

Firstly, I found a possible typo in your javascript code.

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

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

I believe what you want is $scope.missions[i].missionInfo. Other than this, your code should be fine.

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

Secondly, in angular world, the normal way to iterate is to use ng-repeat (please see Arun's answer). Your view and controller shouldn't know each other, and they should communicate through your model.

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

#3

Inside Loop try this code:

在循环内部尝试以下代码:

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

Code not tested. Test it and let me know.

代码不进行测试。测试一下，让我知道。

#1