本文详解如何通过结构化 dom 操作与模板化克隆策略，为每个选中分类单独创建商品表格，彻底解决多分类下 ajax 返回数据交叉重复、dom 元素错位的问题。
本文详解如何通过结构化 dom 操作与模板化克隆策略，为每个选中分类单独创建商品表格，彻底解决多分类下 ajax 返回数据交叉重复、dom 元素错位的问题。
在基于 jQuery 的后台管理界面中，当用户选择多个商品分类（如 categories_id = [1, 2]）并触发 AJAX 请求时，常见错误是：所有分类的响应数据被统一注入到同一个 .inventory_products_lines_values 模板实例中，导致后续克隆操作反复复用已渲染的 DOM 节点——结果就是第二分类的数据“叠加”在第一分类表格下方，甚至出现整块表格重复两次。
根本原因在于原逻辑中 clone() 和 insertAfter() 的使用方式未做作用域隔离：
- 每次循环都调用 $('.inventory_products_lines.inventory_products_lines_values').last().clone()，但该选择器始终匹配全局最后一个可见/非 hidden 的行模板，而非当前分类专属副本；
- $('.inventory_products_lines_values').closest('div').after(clone) 进一步将新克隆行插入到整个页面中最后一个 .inventory_products_lines_values 所在容器之后，完全脱离分类上下文；
- 最终 $('#default_inventory_products .inventory_products_block').clone(true) 被重复执行多次，且每次都在 #inventory_products 同一位置后追加，造成多个相同结构的 <div class="inventory_products_block"> 并列堆叠。
✅ 正确解法：为每个分类创建独立容器 + 使用静态 HTML 模板字符串克隆
推荐采用「容器隔离 + 模板预定义」模式，避免依赖动态 DOM 状态进行克隆：
<!-- 隐藏的结构化模板（仅定义一次，不参与实际渲染） -->
<div class="hidden" id="template-category-block">
<div class="inventory_products_block">
<div class="inventory_products_lines inventory_products_lines_head">
<div class="search_category_name head"></div>
<div class="combinations_head head">Comb</div>
<div class="brand_head head">Brand</div>
<div class="wholesale_price_head head">Wholesale Price</div>
<div class="price_head head">Retail Price</div>
<div class="now_quantity_head head">Now Qty</div>
<div class="quantity_head head">New Qty</div>
<div class="discrepancy_head head">Discrepancy</div>
<div class="status_head head">Status</div>
</div>
<div class="inventory_products_lines_container"></div>
</div>
</div>
<div class="hidden" id="template-product-row">
<div class="inventory_products_lines inventory_products_lines_values inventory_products_lines_result">
<div class="product_number"></div>
<div class="id_product hidden"></div>
<div class="id_product_attribute hidden">
<input name="id_product_attribute[]" type="hidden" value="0" />
</div>
<div class="name"></div>
<div class="combinations"></div>
<div class="brand"></div>
<div class="wholesale_price"></div>
<div class="price"></div>
<div class="now_quantity"></div>
<div class="inventory_quantity">
<input name="inventory_quantity[]" type="text" value="" />
</div>
<div class="discrepancy_block">
<input name="discrepancy[]" type="hidden" value="" />
<span class="discrepancy"></span>
</div>
<div class="category_inventory_wholesale_deficit_block">
<input name="category_inventory_wholesale_deficit_price[]" type="hidden" value="" />
</div>
<div class="category_inventory_retail_deficit_price_block">
<input name="category_inventory_retail_deficit_price[]" type="hidden" value="" />
</div>
<div class="status"></div>
</div>
</div>对应 JavaScript 实现（含 Promise 并发控制，确保顺序）：
// 获取模板字符串（仅执行一次）
const $blockTemplate = $('#template-category-block');
const $rowTemplate = $('#template-product-row');
const blockHTML = $blockTemplate.html();
const rowHTML = $rowTemplate.html();
// 使用 Promise.all 确保所有请求完成后再按序渲染（可选，提升用户体验）
const ajaxPromises = categories_id.map(category_id =>
$.ajax({
type: 'GET',
url: 'ajax-tab.php',
data: {
ajax: true,
controller: 'AdminInventory',
action: 'searchProductsByCategory',
token: token,
search_category_id: category_id,
rand: Date.now()
},
dataType: 'json'
})
);
Promise.all(ajaxPromises).then(responses => {
responses.forEach((data, index) => {
// 创建独立分类容器
const $block = $(`<div class="inventory_products_block">${blockHTML}</div>`);
$block.find('.search_category_name').append(`<h2>${data.category_name}</h2>`);
// 渲染该分类下所有商品行
const $container = $block.find('.inventory_products_lines_container');
$.each(data.products, (key, val) => {
const $row = $(rowHTML);
$row.find('.name').html(`<span>${val.name}</span>`);
$row.find('.brand').html(`<span>${val.manufacturer_name}</span>`);
$row.find('.now_quantity').html(
`<input type="hidden" name="now_quantity[]" value="${val.quantity}"><span>${val.quantity}</span>`
).attr('data-quantity', val.quantity);
$row.find('.id_product').html(
`<input name="id_product[]" type="hidden" value="${val.id_product}" />`
);
$row.find('.status').html(
val.active === 1
? '<i style="color:#72C279;" class="icon-check"></i>'
: '<i style="color:#E08F95;" class="icon-remove"></i>'
);
$row.removeClass('hidden');
$container.append($row);
});
// 插入到主容器末尾（如 #inventory_products）
$('#inventory_products').after($block);
});
// 重置序号（全局重排）
$('.inventory_products_lines_result').each((i, el) => {
$(el).find('.product_number').text((i + 1) + '.');
});
});⚠️ 关键注意事项：
- 禁止跨分类复用 .last().clone()：它极易受 DOM 当前状态干扰，应改用 $(templateHTML) 显式构造；
- 避免多次 .after() 同一目标元素：$('#inventory_products').closest('div').after(...) 在循环中会不断在相同位置插入，导致层级混乱；
- 推荐 Promise.all() 统一处理异步：既防止竞态导致的顺序错乱，也便于错误集中捕获；
- 模板需保持纯净：#template-* 元素必须设为 .hidden 且不参与任何业务逻辑，仅作字符串源；
- ID 属性需唯一性处理：示例中 id="inventory_id_product" 等静态 ID 应改为 class 或动态生成（如 id="inventory_id_product_${val.id_product}"），否则违反 HTML 规范。
通过以上重构，每个分类都将拥有语义清晰、作用域隔离的独立表格区块，彻底消除数据混杂与重复渲染问题，同时提升代码可维护性与扩展性。
