jQuery排序函数在Chrome失效但Firefox正常，求问题根源

问题描述 #

使用jQuery3.6.1编写的排序代码，点击#tri按钮时对#resultats内的.notice div按.bibloc文本排序，该功能在Firefox中正常运行，但在Chrome等其他浏览器无任何反应，控制台无报错信息。

原JavaScript代码 #

$("#tri").click(function() {
    var $divs = $("#resultats div.notice");
    var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find("div.bibloc:first").text() > $(b).find("div.bibloc:first").text();
    });
    $("#resultats").html(alphabeticallyOrderedDivs);
});

对应HTML结构 #

<div id="resultats">
    <div class='notice' class='2022'>
        <div class='internotice'></div>
        <div class='notice_header'>
            <p class='title'><img src='img1.png' /></p>
            <h4>Title1</h4>
            <p>details<br/>info</p>
        </div>
        <div class='bibloc'>
            <p class='enrayon'> ref1<span>text</span></p>
        </div>
    </div>

    <div class='notice' class='2022'>
        <div class='internotice'></div>
        <div class='notice_header'>
            <p class='title'><img src='img1.png' /></p>
            <h4>Title2</h4>
            <p>details<br/>info</p>
        </div>
        <div class='bibloc'>
            <p class='enrayon'> ref2<span>text</span></p>
        </div>
    </div>
</div>

问题根源 #

JavaScript的sort()方法要求比较函数返回数值类型（-1、0、1），但当前代码返回的是布尔值（true/false）。不同浏览器对布尔值的处理逻辑存在差异：

• Firefox会自动将true转为1、false转为0，因此能正常触发排序逻辑；
• Chrome等浏览器对布尔值的处理不符合预期，导致排序逻辑失效，元素顺序无变化。

另外，原HTML中.notice的class属性重复声明（<div class='notice' class='2022'>）属于无效语法，虽不直接影响排序，但建议修正为<div class='notice 2022'>。

解决方案 #

修改排序比较函数，返回标准的数值结果：

$("#tri").click(function() {
    var $divs = $("#resultats div.notice");
    var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
        const textA = $(a).find("div.bibloc:first").text().trim();
        const textB = $(b).find("div.bibloc:first").text().trim();
        // 按字母升序排序
        if (textA < textB) return -1;
        if (textA > textB) return 1;
        // 文本相同时保持原顺序
        return 0;
    });
    $("#resultats").html(alphabeticallyOrderedDivs);
});

优化说明 #

1. 调用trim()去除文本前后空白，避免空白字符干扰排序结果；
2. 明确返回-1、0、1的数值，保证所有浏览器行为一致；
3. 增加文本相等时的处理逻辑，维持元素原顺序（稳定排序）。

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