3

jquery を使用して html の div にデータを追加することについて質問があります。

これは私のhtmlファイルにあるものです：

<div class="container">
        <div class="row">
            <div class="span12">
                <div class="row">
                    <div id="errors" class="text-error"></div>
                </div>
            </div>
        </div>
</div>

これは私のjavascriptファイルです:

function checkCompletion(data){

    // IMPORTANT VALUES
    var app_important = ["submit_description", "app_icon", "address", "email"];
    var event_important = ["name", "datefrom", "dateto", "description", "email"];

    $("#errors").append("<div class='span6'><div class='well'>");

    // LOOPS + HEADERS
    $("#errors").append("<h3>App</h3>");
    doLoop(data.app, app_important);

    $("#errors").append("<h3>Events</h3>");
    doLoop(data.events, event_important);
}

// ar           => app data array
// ar_important => important props app (array)
function doLoop(ar, ar_important) {
    $.each(ar, function(value) {
        $.each(ar_important, function(i) {
            if(ar[value][ar_important[i]] == '') $("#errors").append("<p>" + ar_important[i]+" is missing</p>");
            //else $("#errors").append("<p> :) "+ar_important[i]+"</p>");
        });
    });
    $("#errors").append("</div></div>");
}

data パラメーターは、大量のデータを含む JSON オブジェクトです。
ご覧のとおり、私はそうしています$("#errors").append("<div class='span6'><div class='well'>");

しかし、div タグは自動的に閉じられるため、エラーは含まれません。
これを修正し、追加で作業する方法を知っている人はいますか?

ニールス

4

1 に答える 1

1

このような文字列を作成する必要はありません。ほとんどのコードで既に DOM ノードを構築しています。

これらのノードに直接追加するだけです。要素の作成を修正して<div>から、最も内側に追加するだけです。これがあなたが求めているものだと思います。

function checkCompletion(data){

    var app_important = ["submit_description", "app_icon", "address", "email"];
    var event_important = ["name", "datefrom", "dateto", "description", "email"];

// make the outer `span6`
    var span6 = $("<div class='span6'></div>")

// make the inner `well`, and append it to the span6
    var well = $("<div class='well'></div>").appendTo(span6);

// do all your appends to the `well` element, 
//    passing it to `doLoop` so it can do the same
    well.append("<h3>App</h3>");
    doLoop(data.app, app_important, well);

    well.append("<h3>Events</h3>");
    doLoop(data.events, event_important, well);
}

function doLoop(ar, ar_important, well) {
    $.each(ar, function(value) {
        $.each(ar_important, function(i) {
           if(ar[value][ar_important[i]] == ''){
               well.append("<p>" + ar_important[i]+" is missing</p>");
           }
           //else{ errorAppend += "<p> :) "+ar_important[i]+"</p>";
        });
    });

  // append the outer `span6` to `#errors`
    $("#errors").append(span6);
}

要素を作成するさらにクリーンな方法があります。これは、より良いアプローチを使用した同じコードです。

function checkCompletion(data){

    var app_important = ["submit_description", "app_icon", "address", "email"];
    var event_important = ["name", "datefrom", "dateto", "description", "email"];

// make the outer `span6`
    var span6 = $("<div/>", {"class":"span6"})

// make the inner `well`, and append it to the span6
    var well = $("<div/>", {"class":"well"}).appendTo(span6);

// do all your appends to the `well` element, 
//    passing it to `doLoop` so it can do the same
    $("<h3/>", {text: "App"}).appendTo(well);
    doLoop(data.app, app_important, well);

    $("<h3/>", {text: "Events"}).appendTo(well);
    doLoop(data.events, event_important, well);
}

function doLoop(ar, ar_important, well) {
    $.each(ar, function(value) {
        $.each(ar_important, function(i) {
           if(ar[value][ar_important[i]] == ''){
               $("<p/>", {text: ar_important[i]+" is missing"}).appendTo(well);
           }
           //else{ errorAppend += "<p> :) "+ar_important[i]+"</p>";
        });
    });

  // append the outer `span6` to `#errors`
    $("#errors").append(span6);
}
于 2013-05-23T19:46:24.407 に答える