如何在jQuery .html()方法中分配数组元素到对应子元素？

你的核心思路已经找对了，但问题出在直接用.html()替换整个容器内容——这会把每个<div class="listagem-item">里的其他绑定了后端参数的元素（比如another div）都覆盖掉。我们只需要精准替换<a>元素，就能保留其他内容，同时完成排序需求。

正确实现代码 #

// 1. 获取所有包含产品的li容器，保留每个容器里的原有内容
const productItems = $('#listProducts ul li ul li.span4');

// 2. 提取所有需要排序的a标签，复制并保留绑定的事件/数据，再按href排序
const sortedLinks = productItems.find('a.produto-sobrepor')
  .clone(true) // 克隆元素并保留所有绑定的事件、数据
  .get()
  .sort(function(a, b) {
    // 用localeCompare做字符串排序，比手动三元判断更可靠
    return a.getAttribute('href').localeCompare(b.getAttribute('href'));
  });

// 3. 遍历每个产品容器，替换里面的a标签为排序后的对应项
productItems.each(function(index) {
  $(this).find('a.produto-sobrepor').replaceWith(sortedLinks[index]);
});

为什么你的原有代码有问题？ #

你之前的写法$('#listProducts ul li ul li div').html(function(i) { return arr[i]; })会把整个.listagem-item的内容完全替换成排序后的<a>元素，导致原本的another div 1、another div 2这些绑定了后端参数的元素被丢失。而上面的写法只替换目标<a>标签，其他内容原封不动保留。

关键细节说明 #

• 使用clone(true)：确保克隆出来的<a>元素保留原有的所有事件绑定和数据属性，符合你“每个元素绑定后端唯一参数”的要求。
• 使用localeCompare：专门用于字符串的自然排序，比手动写a.getAttribute('href') > b.getAttribute('href') ? 1 : -1更适配各种字符串场景（比如包含数字、特殊字符的URL）。
• 精准定位容器：通过li.span4定位每个产品的外层容器，避免误操作其他元素。

这样处理后，每个<li class="span4">里的<a>元素会按href字母顺序排列，而其他绑定了后端参数的元素会完整保留下来。

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