Comment corriger la fermeture automatique d'une balise div dans ce cas ?

Question

J'ai une question concernant l'ajout de données à une div dans mon html par l'intermédiaire de jquery.

C'est ce que j'ai dans mon html fichier :

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

Il s'agit de mon javascript fichier :

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

Le paramètre data est un objet JSON contenant de nombreuses données.
Comme vous pouvez le constater, je fais $("#errors").append("<div class='span6'><div class='well'>");

Mais la balise div se ferme automatiquement, de sorte que mes erreurs ne s'y trouvent pas.
Quelqu'un sait-il comment je peux résoudre ce problème tout en continuant à travailler avec append ?

Niels

Answer 1

Il n'est pas nécessaire de construire des chaînes de ce type. Vous construisez déjà des nœuds DOM dans la plupart de votre code.

Tout ce que vous devez faire, c'est ajouter directement à ces nœuds. Il suffit de fixer la création de l'élément <div> et ensuite ajouter au plus interne, ce qui, je pense, est ce que vous recherchez.

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

---

Il existe des façons encore plus propres de créer les éléments. Voici le même code, avec une meilleure approche.

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