jQuery排序失败

jQuery sorting fails

本文关键字：失败 排序 jQuery      更新时间：2023-09-26

我有以下html结构（无尽）：

<div class="wrapper">
   <div class="content"> Its block 3
      <div class="number">3</div>
   </div>
</div>
<div class="wrapper">
   <div class="content"> Its block 2
      <div class="number">2</div>
   </div>
</div>

我想通过点击这样的按钮进行排序：

<div class="wrapper">
   <div class="content"> Its block 2  <--- new order
      <div class="number">2</div> <--- new order
   </div>
</div>
<div class="wrapper">
   <div class="content"> Its block 3  <--- new order
      <div class="number">3</div> <--- new order
   </div>
</div>

但对于我的脚本，它不起作用（我想是因为div类名相同吗？）。那么，我该如何排序并按最高数字和最低数字切换排序呢？有人能帮我吗？

function sortHigh(a, b) {
    var date1 = $(a).find(".content .number").text()
    var date2 = $(b).find(".content .number").text();
    return $(a).find(".content .number").text() > $(b).find(".content .number").text();
};
function sortLow(a, b) {
    var date1 = $(a).find(".content .number").text()
    var date2 = $(b).find(".content .number").text();
    return $(a).find(".content .number").text() < $(b).find(".content .number").text();
};

//how to toggle?
$(function () {
    $('.sort').click(function () {
        $('.content').sort(sortHigh).appendTo('.wrapper');
    }, function () {
        $('.content').sort(sortLow).appendTo('.wrapper');
    });
});

这是我的糟糕尝试：小提琴

尝试用以下代码更改代码：-

var toggle="high";
//how to toggle?
$(function(){
 $('.sort').click(function () {
    if (toggle == "high") {            
        toggle = "low";
        $('.list').html($('.list .wrapper').sort(sortLow));
    } else {          
        toggle = "high"
        $('.list').html($('.list .wrapper').sort(sortHigh));
    }
  });
});

演示

使用jQuery，您可以添加如下排序功能：

jQuery.fn.sortDomElements = (function() {
  return function(comparator) {
    return Array.prototype.sort.call(this, comparator).each(function(i) {
      this.parentNode.appendChild(this);
    });
  };
})();
var srtdesc = true;
$(function() {
  $(".sort").click(function() {
    srtdesc = !srtdesc;
    $(".list").children().sortDomElements(function(a, b) {
      if (srtdesc) {
        return Number($(a).find('.number').text()) - Number($(b).find('.number').text());
      } else {
        return Number($(b).find('.number').text()) - Number($(a).find('.number').text());
      }
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="sort">Sort-Button</button>
<div class="list">
  <div class="wrapper">
    <div class="content">Its block 3
      <div class="number">3</div>
    </div>
  </div>
  <div class="wrapper">
    <div class="content">Its block 1
      <div class="number">1</div>
    </div>
  </div>
  <div class="wrapper">
    <div class="content">Its block 2
      <div class="number">2</div>
    </div>
  </div>
</div>

您的代码有两个问题。

首先，排序是对字符串进行排序。例如CCD_ 1。

另一个问题是你使用的点击功能没有正确切换。我猜你对.hover()语法很熟悉，这就是为什么你这样做的原因。

正如您所看到的，我正在强制sortHigh和sortLow返回数字。我还在点击功能中进行了低/高排序检查和切换。

function sortHigh(a, b) {
    var date1 = Number($(a).find(".number").text());
    var date2 = Number($(b).find(".number").text());
    return date1 > date2;
};
function sortLow(a, b) {
    var date1 = Number($(a).find(".number").text());
    var date2 = Number($(b).find(".number").text());
    return date1 <= date2;
};
$(function(){
    var sortHighCheck = null;
    $('.sort').click(function(){
        if (sortHighCheck === true) {
            $('.wrapper').sort(sortLow).appendTo('.list')
            sortHighCheck = false;
        } else {
            $('.wrapper').sort(sortHigh).appendTo('.list')
            sortHighCheck = true;
        }
    });
});

编辑：忘记添加jsfiddle链接

如果您想排序，您可以向每个内容div添加数据val属性：

<div class="content" data-val="2"> Its block 2  <--- new order

并使用以下代码对每个包装器div进行排序：

jQuery("#sort").click( function() {
    jQuery('.wrapper').sort(function (a, b) {
        return jQuery(a).find('.content').data('val') - jQuery(b).find('.content').data('val');
    }).each(function (_, container) {
        jQuery(container).parent().append(container);
    });
});
相关文章：