如何用jQuery/JavaScript在指定DIV间插入新DIV并分组？

jQuery 实现方案 #

$(document).ready(function() {
  const $row = $('.row');
  const $testDivs = $row.find('.testdiv[data-ident]');
  
  // 构建第一个分组容器
  const $newDiv1 = $('<div class="NEW DIV 1"></div>');
  $newDiv1.append($testDivs.eq(0));
  
  // 包裹第2、3个testdiv
  const $newDiv2 = $('<div class="NEW DIV 2"></div>').append($testDivs.eq(1), $testDivs.eq(2));
  $newDiv1.append($newDiv2);
  
  $newDiv1.append($testDivs.eq(3));
  
  // 包裹第5、6个testdiv
  const $newDiv3 = $('<div class="NEW DIV 3"></div>').append($testDivs.eq(4), $testDivs.eq(5));
  $newDiv1.append($newDiv3);
  
  $newDiv1.append($testDivs.eq(6));
  
  // 构建最后一个分组容器，包裹第8、9个testdiv
  const $newDiv4 = $('<div class="NEW DIV 4"></div>').append($testDivs.eq(7), $testDivs.eq(8));
  
  // 替换原row内的结构
  $row.empty().append($newDiv1, $newDiv4);
});

原生 JavaScript 实现方案 #

如果不想依赖jQuery，可以用原生DOM API实现相同逻辑：

document.addEventListener('DOMContentLoaded', function() {
  const row = document.querySelector('.row');
  const testDivs = row.querySelectorAll('.testdiv[data-ident]');
  
  // 构建第一个分组容器
  const newDiv1 = document.createElement('div');
  newDiv1.className = 'NEW DIV 1';
  newDiv1.appendChild(testDivs[0]);
  
  // 包裹第2、3个testdiv
  const newDiv2 = document.createElement('div');
  newDiv2.className = 'NEW DIV 2';
  newDiv2.appendChild(testDivs[1]);
  newDiv2.appendChild(testDivs[2]);
  newDiv1.appendChild(newDiv2);
  
  newDiv1.appendChild(testDivs[3]);
  
  // 包裹第5、6个testdiv
  const newDiv3 = document.createElement('div');
  newDiv3.className = 'NEW DIV 3';
  newDiv3.appendChild(testDivs[4]);
  newDiv3.appendChild(testDivs[5]);
  newDiv1.appendChild(newDiv3);
  
  newDiv1.appendChild(testDivs[6]);
  
  // 构建最后一个分组容器，包裹第8、9个testdiv
  const newDiv4 = document.createElement('div');
  newDiv4.className = 'NEW DIV 4';
  newDiv4.appendChild(testDivs[7]);
  newDiv4.appendChild(testDivs[8]);
  
  // 替换原row内的结构
  row.innerHTML = '';
  row.appendChild(newDiv1);
  row.appendChild(newDiv4);
});

逻辑说明 #

1. 先获取目标容器.row和所有符合条件的.testdiv[data-ident]元素；
2. 按照你给出的目标结构，依次创建新的分组容器，将对应的原有testdiv元素移动到这些容器中（DOM操作中的append/appendChild会直接移动元素，而非复制）；
3. 最后清空原.row内的内容，插入新构建的分组结构。

内容的提问来源于stack exchange，提问作者Acidburns