如何正确使用自定义jQuery prependClass函数调整元素类顺序？

嘿，我来帮你解决这个类名顺序的困扰！你想要把half换成paid还让它排在最前面，用普通的removeClass+addClass确实会把新类丢到后面，咱们一步步来搞定：

先确保自定义函数能正常工作 #

你从Stack Overflow找的prependClass函数逻辑没问题，但得注意加载顺序——必须在jQuery之后加载这个函数，不然浏览器会找不到jQuery对象，函数就白定义了。我给你稍微优化了下，处理了空类名的情况，避免出现多余空格：

(function($) {
  jQuery.fn.extend({
    prependClass: function(newClasses) {
      return this.each(function() {
        var currentClasses = $(this).prop("class");
        // 处理空类名，避免多出来的空格
        var newClassList = currentClasses ? `${newClasses} ${currentClasses}` : newClasses;
        $(this).removeClass(currentClasses).addClass(newClassList);
      });
    }
  });
})(jQuery);

把这段代码放在jQuery的脚本标签之后，你的业务脚本之前就行。

正确调用函数实现你的需求 #

接下来就是调用啦，先把原来的half类删掉，再用prependClass把paid加到最前面：

$("#mycontent a.half").removeClass("half").prependClass("paid");

执行完这段代码，你的目标元素就会变成：

<a class="paid first3547" href="#">this</a>

完全符合你想要的效果！

为啥之前的方法顺序不对？ #

用removeClass("half").addClass("paid")的时候，jQuery默认会把新添加的类追加到现有类的末尾，所以才会出现first3547 paid的情况。而咱们的prependClass是先清空当前所有类，再重新拼接成新类名 + 旧类名的形式，这样就保证了新类排在最前面。

额外的偷懒小技巧 #

如果你不想用自定义函数，其实还有更直接的方法——直接操作元素的className属性替换类名：

$("#mycontent a.half").each(function() {
  this.className = this.className.replace("half", "paid");
});

这个方法更简单，前提是half类在元素里只出现一次哦~

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