如何用jQuery按子项数字排序父元素及按li内数字降序排序列表

嘿，这个需求用jQuery实现其实挺清晰的，我分通用思路和针对你提供的HTML结构的具体方案来给你说明：

一、通用实现思路 #

要完成“按子元素数字排序父级元素”，核心就这几步：

• 先拿到所有需要排序的父级元素的jQuery集合
• 把这个集合转换成原生DOM数组（因为jQuery对象没法直接用数组的sort方法）
• 写排序逻辑：从每个父元素里提取目标子元素的数字值，然后根据这个值比较排序
• 把排好序的元素重新插回它们的父容器里

二、针对你给出的HTML的具体代码 #

针对你这个ul#ul-list的结构，要按.rating里的数字降序（数字越大越靠前）排列所有li，直接用这段代码就行：

// 获取ul容器
const $listContainer = $('#ul-list');
// 把所有li转成原生DOM数组
const listItems = $listContainer.children('li').get();

// 执行排序
listItems.sort(function(itemA, itemB) {
  // 提取两个li里的rating数值，转成整数（trim处理多余空格）
  const ratingValueA = parseInt($(itemA).find('.rating').text().trim(), 10);
  const ratingValueB = parseInt($(itemB).find('.rating').text().trim(), 10);
  // 降序排序：用B的数值减A的，这样大的在前
  return ratingValueB - ratingValueA;
});

// 把排好序的li重新添加到ul中
$listContainer.append(listItems);

代码细节拆解： #

• $listContainer.children('li').get()：jQuery对象是类数组结构，用get()可以转成真正的JS数组，这样才能调用数组的sort方法
• .trim()：防止.rating文本里有多余的空格或换行，确保转数字时不出错
• parseInt(..., 10)：必须指定第二个参数为10（十进制），不然遇到以0开头的数字会被误判为八进制，导致计算错误
• append(listItems)：DOM元素在页面中是唯一的，append会把原有的li移动到新位置，不会重复创建元素，非常高效

如果要改成升序排列，只需要把排序逻辑里的return ratingValueB - ratingValueA改成return ratingValueA - ratingValueB就行啦！

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