将 div 环绕在 jQuery 中附加的 div 无法正常工作

Question

我在下面有这个代码。我想将每个都包装$containerCard在一个封闭的 div 中以用于样式目的。我试过了，wrap()但它没有看到我想要的（它添加了 3 个相同的 div，因为它在 for 循环中并得到 3 个结果）。我正在尝试获取 JSON 对象的结果并进行响应式布局。

这是 HTML

  <div class="container">

    <div class="cards" >

     <!-- Would like to wrap each set of appended divs in one enclosing div called "card" -->

    </div>

  </div>

和 JS

 var $container = $('.container');

 var $containerCard = $container.find('.cards');

  $.each(json.screens[0].config.views, function(index, element) {

  $containerCard.wrap('<div class="card">');

  $containerCard.append('<div class="card-title"' +  '">' + element.title +  '</div>' );

  $containerCard.append('<div class="card-image"' +  '">' + '<img src="' + element.thumbnail + '"/>' +  '</div>');

  $containerCard.append('<div class="card-content"' +  '">' + element.info +  '</div>' );

  $containerCard.append('<div class="card-description"' +  '">' + element.description +  '</div>' );

});