如何将每三个唯一的子元素包装在新的 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>这反过来创建了上图中详述的结构。编辑：这是预期的结果。