如何将每三个唯一的子元素包装在新的 div 中

Question

我目前正在尝试重建我无法访问 DOM 的网站部分。最初该部分是用表格构建的，现在我正在尝试在 div 中重建结构。我已经得到了一个父容器，其中包含表的所有内容作为子项，如下所示：

Chrome 控制台窗口显示表重建的当前进度 ，如果可能的话，我想将第一个对应的“model-image-cell”元素与下一个对应的第一个“model-info-cell”元素包装起来，依此类推。

由于我的知识有限，我遍历了孩子们并尝试将每三个 div 包装在一个新容器中，但这只是将模型图像和模型信息分组。

任何人都可以对这种情况有所了解吗？谢谢。

编辑：抱歉，我认为以前的代码是没有意义的，但这里是。

$("#button").click(function(){

  $('#ProductDataList').replaceWith(function(){

     $productListContainer = $("<div>", {html: $(this).html()});

     $.each(this.attributes, function(i, attribute){

          $productListContainer.attr(attribute.name, attribute.value);

    });

    return $productListContainer;

  })

  $('#ProductDataList tbody').contents().unwrap();

  $('#ProductDataList tr').contents().unwrap();

  $('#ProductDataList td').replaceWith(function(){

     $div = $("<div>", {html: $(this).html()});

     $.each(this.attributes, function(i, attribute){

          $div.attr(attribute.name, attribute.value);

    });

    return $div;

  })

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="ProductDataList" class="product-data-list-table">

  <tbody><tr>

    <td data-imageurl="/Images/Models/150/7997.jpg" data-hoverimageurl="/Images/Models/150/7997-1.jpg" id="ModelImageCell1" class="model-image-cell">

    <span>Image</span>

</td><td data-imageurl="/Images/Models/150/7997.jpg" data-hoverimageurl="/Images/Models/150/7997-1.jpg" id="ModelImageCell1" class="model-image-cell">

    <span>Image</span>

</td><td data-imageurl="/Images/Models/150/7997.jpg" data-hoverimageurl="/Images/Models/150/7997-1.jpg" id="ModelImageCell1" class="model-image-cell">

    <span>Image</span>

这反过来创建了上图中详述的结构。

编辑：这是预期的结果。