Wie verhindert man automatische Tag-Schließung in jQuery append()?

Question

Aus Gründen der Formatierung versuche ich jedes dritte Ergebnis aus meiner JSON-Datei verschachteln zu verschachteln in einer Div-Klasse "Zeile".

Ich dachte, das wäre eine einfache Sache zu tun, aber jedes Mal, wenn ich versuche, schließt jQuery meine Tags.

Proper Layout sollte

<div class="row"> 
    <div class="four columns"></div> 
    <div class="four columns"></div> 
    <div class="four columns"></div> 
</div> 

sein Hier ist mein Code:

var sexIcon = ''; 
var typeIcon = ''; 
var divClassRow = ' <div class="row"> '; 
var divClassRowEnd = ' </div><div class="row"> '; 
$(document).ready(function(){ 

    $.getJSON("scripts/pets.json", function(jsonData){ 
     $.each(jsonData, function(object, value){ 
      if (value.sex=='female'){ 
       sexIcon = 'images/female-active.png'; 
      } 
      else { 
       sexIcon = 'images/male-active.png'; 
      }; 
      if (value.type=='dog'){ 
       typeIcon = 'images/dog-sm.png'; 
      } 
      else { 
       typeIcon = 'images/cat.png'; 
      } 
      $('.columns:first-child').before(divClassRow); 
      $.each($('.columns:nth-child(4n)'), function(){ 
       $(this).after(divClassRowEnd); 
      }); 


      $(".cards").append(

       '<div class="four columns '+ value.type +' '+ value.sex +' '+ value.size +'">'+ 
       '<div class="card-header"><h3>'+value.name+'</h3><img src="'+typeIcon+'" alt=""><img src="'+sexIcon+'" alt=""></div>'+ 
       '<div class="card-content">'+ 
       '<img src="'+value.photo+'" alt="">'+ 
       '<p><b>Breed:</b> '+value.breed+'</p>'+ 
       '<p><b>Sex:</b> '+value.sex+'</p>'+ 
       '<p><b>Age:</b> '+value.age+'</p>'+ 
       '<p><b>Time at Rescue:</b> '+value.time+'</p>'+ 
       '<p> '+value.about+'</p>'+ 
       '<br>'+ 
       '<button class="button-primary u-full-width">Find Out more!</button>'+ 
       '</div></div>' 

       ); /*END APPEND*/ 
     });/*END EACH*/ 
    });/*END GETJSON*/ 


}); /* Document Ready */ 

Alle Ideen, was ich tun kann? Oder vielleicht, wie man das besser macht.

Answer 1

Verwenden wrapAll()

var list=$('.four'); 
for(var i = 0; i < list.length; i+=4) { 
    list.slice(i, i+4).wrapAll("<div class='row'></div>"); 
} 

demo