Question

我想知道为什么这段代码在Chrome中不起作用。它在Safari中效果很好。我一直在搜索，但似乎找不到答案！

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);
  });
});

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 > 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>

显示排序后的div的最后一条命令不会执行任何操作，并且控制台中不会显示任何错误。我很确定脚本中的最后一行不起作用，因为我尝试对其进行调试。感谢您的回答！

Answer 1

您的代码存在一些问题：缺少引号，对错误的对象进行排序，排序函数的返回值错误等等...

我做了一个工作示例，您可以将此工作代码与您的工作代码进行比较，如果您有任何疑问，请询问，我明天再回答。

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>

jQuery HTML方法在Chrome上不起作用

1 个答案: