jQuery html method doesn't work on Chrome

Question

I'd like to know why this piece of code is not working in Chrome. It works well in Safari. I've been searching for a bit now, but I can't seem to find an answer!

jQuery.noConflict();
jQuery(document).ready(function() {
  var jQuerydivsa = jQuery("div.f-sr");

  jQuery("#s-alf").on("click", function() {
    var orderDivsa = jQuerydivsa.sort(function(a, b) {
      return (jQuery(a).find("h4.b-desc").text()) > (jQuery(b).find("h4.b-desc").text());
    });
    jQuery("#brand-srt").html(orderDivsa);
  });
});

The HTML can be simplified as:

<button class="btn btn--light btn--bordered btn-md">Sort by <span class="lnr lnr-chevron-down"></span></button>
   <div class="dropdown dropdown--author">
        <ul>

           <li id="s-alf">
                <a > A-Z</a>
           </li>

        </ul>
   </div>

<div class="col-lg-4 col-sm-6 col-md-4 col-6  f-sr>
    <h4 class="b-desc"> A </h4>
    <h4 class="b-desc"> B </h4>
</div>

The last command to show the sorted divs doesn't do nothing and no error shows up in my console. I'm pretty sure that the last line in the script doesn't work, since I tried to debug it. Thanks for your answer!

Answer 1

There are some problems with your code: missing quotes, sorting wrong object, wrong return value from sorting function, and so on...

I made a working example, you may compare this working code with your, if you have questions please ask, I'll answer tomorrow.

jQuery.noConflict();
    jQuery(document).ready(function() {
      var jQuerydivsa = jQuery("div.f-sr h4");
    
      jQuery("#s-alf").on("click", function() {
        var orderDivsa = jQuerydivsa.sort(function(a, b) {
          return (
            jQuery.trim(jQuery(a).text())
            >
            jQuery.trim(jQuery(b).text())
            ? 1 : -1);
        });
        jQuery("#brand-srt").html('').append(orderDivsa);
      });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML:

    <button class="btn btn--light btn--bordered btn-md">
      Sort by
      <span class="lnr lnr-chevron-down"></span>
    </button>
    <div class="dropdown dropdown--author">
      <ul>
        <li id="s-alf">
          A-Z
        </li>
      </ul>
    </div>
    
    <div id="brand-srt" class="col-lg-4 col-sm-6 col-md-4 col-6  f-sr">
        <h4 class="b-desc"> B </h4>
        <h4 class="b-desc"> A </h4>
        <h4 class="b-desc"> C </h4>
    </div>