如何防止 jQuery append() 中的自动标记关闭？

Question

由于格式原因，我尝试将我的 json 文件中的每三个结果嵌套在 div 类“行”中。

我认为这将是一件容易的事，但每次我尝试 jQuery 都会关闭我的标签。

正确的布局应该是

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

这是我的代码：

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 */

关于我能做什么的任何想法？或者也许如何更好地做到这一点。

Answer 1

使用 wrapAll()

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

demo