Question

我有一个关于通过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标签会自动关闭，因此我的错误不在其中有谁知道我怎么能解决这个问题并仍然可以使用追加？

尼尔斯

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

在这种情况下如何修复自动关闭div标签

1 个答案: