Question

Chrome会显示与其他浏览器不同的排序结果 - Firefox和Edge会显示所需的结果。

如何使用Chrome获得相同的结果？

我试过，但没有工作，用：

$(function(){
    var order = $('.files').find('.first','.second').sort(sortMe);
    $('.files').append(order);
    });

    function sortMe(a, b) {
    return a.first < b.second;
    }

所需的结果......以及Firefox和其他浏览器的默认设置是：

<div class="file-container">
     <div class="files">
           <div class="first">content</div>
           <div class="first">content</div>
           <div class="second">content</div>
           <div class="second">content</div>
     </div>
 </div>

Chrome返回

<div class="file-container">
     <div class="files">
           <div class="first">content</div>
           <div class="second">content</div>
           <div class="second">content</div>
           <div class="first">content</div>
     </div>
 </div>

Answer 1

.find('.first','.second')处的选择器不正确，其中第二个参数应记录错误Unexpected identifier，尝试调整为.find('.first, .second')而不终止字符串并包含文字逗号,字符将传递两个参数，而不是单个选择器字符串，比较a.dataset - b.dataset , where data- *`属性从0-n开始基于0的索引。

您可以在元素中添加data-*属性以进行比较功能。

    $(function(){
      var order = $('.files').find('.first, .second').sort(sortMe);
      should be$('.files').append(order);
    });

    function sortMe(a, b) {
      console.log(a.dataset)
    return +a.dataset.order - +b.dataset.order;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="file-container">
     <div class="files">
           <div data-order="0" class="first">first content</div>
           <div data-order="1" class="second">second content</div>
           <div data-order="1" class="second">second content</div>
           <div data-order="0" class="first">first content</div>
     </div>
 </div>

Answer 2

使用jquery解决了这个问题，但通常当添加到网站Chrome的不同测试数据每次返回预期结果时，这次代码不需要...

＆＃13;

var array = ['first', 'second'];

$.each(array,function(index,value){
   $('.files').append($('.'+value));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="file-container">
   <div class="files">
     <div class="first">content for 1.1</div>
     <div class="second">content for 2.1</div>
     <div class="second">content for 2.2</div>
     <div class="first">content for 1.2</div>
     <div class="first">content for 1.3</div>
     <div class="second">content for 2.2</div>
   </div>
</div>

＆＃13;

在Chrome中实现与其他浏览器相同的排序结果

2 个答案: