使用jQuery对不同字号的字符串元素排序是否可行？

没问题，咱们完全可以通过jQuery结合元素的font-size样式值来实现这个排序需求。下面我给你一步步拆解实现方法：

核心思路 #

1. 选中所有需要排序的<a>元素
2. 将jQuery对象转换为原生数组，方便使用数组的sort方法
3. 在排序函数中提取每个元素的字号数值，进行比较
4. 把排序后的元素重新插入到父容器中

完整代码示例 #

先看你的HTML结构（我稍微加了几个不同字号的元素方便测试）：

<div id="linkContainer">
  <a style="font-size:30px">#abc</a>
  <a style="font-size:60px">#abc</a>
  <a style="font-size:30px">#abc</a>
  <a style="font-size:20px">#abc</a>
  <a style="font-size:40px">#abc</a>
  <a style="font-size:60px">#abc</a>
  <a style="font-size:30px">#abc</a>
</div>

然后是jQuery代码：

$(document).ready(function() {
  // 1. 获取所有a元素并转为数组
  const sortedLinks = $('#linkContainer a').get().sort(function(a, b) {
    // 2. 提取元素的字号数值（去掉px单位）
    const sizeA = parseInt($(a).css('font-size'), 10);
    const sizeB = parseInt($(b).css('font-size'), 10);
    
    // 3. 按字号从大到小排序：如果B的字号更大，就让B排在前面
    return sizeB - sizeA;
    // 要是想从小到大排序，改成 return sizeA - sizeB; 就行
  });
  
  // 4. 把排序后的元素重新添加到容器中（append会自动移动元素，不用提前删除）
  $('#linkContainer').append(sortedLinks);
});

关键细节说明 #

• $(a).css('font-size')会返回带单位的字符串（比如"30px"），所以用parseInt(..., 10)提取数值，指定基数10避免进制问题。
• 即使你的元素用的是em、rem等相对单位，jQuery的css()方法也会自动计算成绝对像素值，所以这个方法依然有效。
• 相同字号的元素会保持原来的相对顺序（ES6之后的sort是稳定排序，旧浏览器也基本没问题）。

这样就能轻松把你的链接按字号排序啦！

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