Javascript 基于2个条件的jquery排序div

我在我的网站上开发了一种对div（.ligne）进行排序的方法，其中包含各种排序选项。按名称、日期、状态和类型排序。我有一个jquery代码，它工作得很好，我需要对它做更多的工作来减轻它的负担，但是它工作得很好

当单击每个标题“项目”、“年份”、“状态”、“类型”时，再次单击时，我的div将按Asc或Dsc排序

我现在要做的是在对状态div进行排序时使用缩写，要有2个条件，首先按状态名称对状态div进行排序，然后按项目名称对其进行内部排序

事实上有两个标准。我找不到做这件事的方法

下面是一个JSFIDLE：

有人能帮我吗

这是我的html：

<div class="container-fluid titre">

  <div class="row">

  <div class="col-xs-3 text-right" >

  <div class="title" id="projet">PROJECT</div>

    <span id="nom_ASC" class="sort">&#8595;</span> <span id="nom_DSC" class="sort">&#8593;</span>

  </div>

  <div class="col-xs-3 text-right">

    <div class="title" id="annee">YEAR</div><span id="annee_ASC" class="sort">&#8595; </span> <span id="annee_DSC" class="sort">&#8593;</span>

  </div>

  <div class="col-xs-3 text-right">

    <div class="title" id="statut">STATUS</div><span id="statut_ASC" class="sort">&#8595;</span> <span id="statut_DSC" class="sort">&#8593;</span>

  </div>

  <div class="col-xs-3 text-right">

    <div class="title" id="type">TYPE</div><span id="type_ASC" class="sort">&#8595;</span> <span id="type_DSC" class="sort">&#8593;</span>

  </div>

  </div>

</div>

<div id="index" class="container-fluid">

  <div class="row ligne">

    <div class="col-xs-3 nom">130 HOUSING UNITS ROMAINVILLE</div>
    <div class="col-xs-3 annee">2010</div>  
    <div class="col-xs-3 statut">BUILT</div> 
    <div class="col-xs-3 type">LIVE</div> 
    <div class="col-xs-12 content">
    Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari. Vellem aliquis ex vobis robustioribus hunc male dicendi locum suscepisset; aliquanto liberius et fortius et magis more nostro refutaremus istam male dicendi licentiam. Tecum, Atratine, agam lenius, quod et pudor tuus moderatur orationi meae et meum erga te parentemque tuum beneficium tueri debeo.
    </div>

  </div>

  <div class="row ligne">

    <div class="col-xs-3 nom">AGDE CAPE HOTEL</div>
    <div class="col-xs-3 annee">2013</div>  
    <div class="col-xs-3 statut">ON GOING</div> 
    <div class="col-xs-3 type">LEISURE</div> 
    <div class="col-xs-12 content">
    Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari. Vellem aliquis ex vobis robustioribus hunc male dicendi locum suscepisset; aliquanto liberius et fortius et magis more nostro refutaremus istam male dicendi licentiam. Tecum, Atratine, agam lenius, quod et pudor tuus moderatur orationi meae et meum erga te parentemque tuum beneficium tueri debeo.
    </div>

  </div>

  <div class="row ligne">

    <div class="col-xs-3 nom">AIRBUS DELIVERY CENTER</div>
    <div class="col-xs-3 annee">2013</div>  
    <div class="col-xs-3 statut">ON GOING</div>
    <div class="col-xs-3 type">WORK</div> 

  </div>

  <div class="row ligne">

    <div class="col-xs-3 nom">COLLEGE DE FRANCE</div>
    <div class="col-xs-3 annee">2016</div> 
    <div class="col-xs-3 statut">ON GOING</div> 
    <div class="col-xs-3 type">LEARN</div> 

  </div>
  <div class="row ligne">

    <div class="col-xs-3 nom">HACHETTE LIVRE HEADQUARTERS</div>
    <div class="col-xs-3 annee">2015</div> 
    <div class="col-xs-3 statut">BUILT</div> 
    <div class="col-xs-3 type">MOVE</div> 

  </div>



</div>

还有我的Jquery：

var $divs = $("div.row.ligne");
var flag_ville = 1;
var flag_annee = 0;
var flag_statut = 0;
var flag_type = 0;
    $(".sort").hide();
    $("#nom_ASC").show();

/* VILLE */
$('#projet').on('click', function () {
if (flag_ville == 0) {
    $(".sort").hide();
    $("#nom_ASC").show();
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) 
{ return $(a).find(".nom").text() > $(b).find(".nom").text(); });
$("#index").html(alphabeticallyOrderedDivs);
flag_ville=1;
} else {
    $(".sort").hide();
    $("#nom_DSC").show();
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
return !($(a).find(".nom").text() > $(b).find(".nom").text()); });
$("#index").html(alphabeticallyOrderedDivs);
flag_ville=0;
}
});

/* ANNEE */
$('#annee').on('click', function () {
if (flag_annee == 0) {
    $(".sort").hide();
    $("#annee_ASC").show();
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) 
{ return $(a).find(".annee").text() > $(b).find(".annee").text(); });
$("#index").html(alphabeticallyOrderedDivs);
flag_annee=1;
} else {
    $(".sort").hide();
    $("#annee_DSC").show();
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
return !($(a).find(".annee").text() > $(b).find(".annee").text()); });
$("#index").html(alphabeticallyOrderedDivs);
flag_annee=0;
}
});

/* STATUS */
$('#statut').on('click', function () {
if (flag_statut == 0) {
    $(".sort").hide();
    $("#statut_ASC").show();
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) 
{ return $(a).find(".statut").text() > $(b).find(".statut").text(); });
$("#index").html(alphabeticallyOrderedDivs);
flag_statut=1;
} else {
    $(".sort").hide();
    $("#statut_DSC").show();
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
return !($(a).find(".statut").text() > $(b).find(".statut").text()); });
$("#index").html(alphabeticallyOrderedDivs);
flag_statut=0;
}
});

/* TYPE */
$('#type').on('click', function () {
if (flag_type == 0) {
    $(".sort").hide();
    $("#type_ASC").show();
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) 
{ return $(a).find(".type").text() > $(b).find(".type").text(); });
$("#index").html(alphabeticallyOrderedDivs);
flag_type=1;
} else {
    $(".sort").hide();
    $("#type_DSC").show();
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
return !($(a).find(".type").text() > $(b).find(".type").text()); });
$("#index").html(alphabeticallyOrderedDivs);
flag_type=0;
}
});






  $('body').on('click', '.ligne', function () {

    $(this).siblings().children(".content").slideUp(300);
    $(this).children(".content").slideToggle(300)

  });

---

您使用的是简单的

div sort

函数，它进行字符串[列值]比较。您只需要以适当的方式将项目名称与状态/类型字符串进行比较

下面是代码，当您将按状态或类型排序时，在按已排序列排序之后，它将在内部自动按升序排序项目名称[分组以获得相同的已排序列值]。如果希望用户可以按多列排序，那么可以使用此代码作为提示来扩展此功能

/* STATUS */
$('#statut').on('click', function () {
    if (flag_statut == 0) {
        $(".sort").hide();
        $("#statut_ASC").show();
        var alphabeticallyOrderedDivs = $divs.sort(function (a, b){
            return $(a).find(".statut").text() + $(a).find(".nom").text() > $(b).find(".statut").text() + $(b).find(".nom").text(); 
        });  
        $("#index").html(alphabeticallyOrderedDivs);
        flag_statut=1;
    } else {
        $(".sort").hide();
        $("#statut_DSC").show();
        var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
            return $(b).find(".statut").text() + $(a).find(".nom").text() > $(a).find(".statut").text() + $(b).find(".nom").text();
        });
        $("#index").html(alphabeticallyOrderedDivs);
        flag_statut=0;
    }
});

/* TYPE */
$('#type').on('click', function () {
    if (flag_type == 0) {
        $(".sort").hide();
        $("#type_ASC").show();
        var alphabeticallyOrderedDivs = $divs.sort(function (a, b) { 
            return $(a).find(".type").text() + $(a).find(".nom").text() > $(b).find(".type").text() + $(b).find(".nom").text(); 
        });
        $("#index").html(alphabeticallyOrderedDivs);
        flag_type=1;
    } else {
        $(".sort").hide();
        $("#type_DSC").show();
        var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
            return $(b).find(".type").text() + $(a).find(".nom").text() > $(a).find(".type").text() + $(b).find(".nom").text(); 
        });
        $("#index").html(alphabeticallyOrderedDivs);
        flag_type=0;
    }
});

---

尝试提供一个工作的JSFIDLE，它将更容易帮助您：-）可能重复@RonenCypis you's fight我忘了在这里放置链接：@CodeiSir请在添加注释之前查看我的代码。。。我没有使用此方法，因此它没有帮助。从我看到的情况来看，您正在使用带有排序功能的数组排序功能。如果您有解决方案，您也可以投票支持答案：）

/* STATUS */
$('#statut').on('click', function () {
    if (flag_statut == 0) {
        $(".sort").hide();
        $("#statut_ASC").show();
        var alphabeticallyOrderedDivs = $divs.sort(function (a, b){
            return $(a).find(".statut").text() + $(a).find(".nom").text() > $(b).find(".statut").text() + $(b).find(".nom").text(); 
        });  
        $("#index").html(alphabeticallyOrderedDivs);
        flag_statut=1;
    } else {
        $(".sort").hide();
        $("#statut_DSC").show();
        var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
            return $(b).find(".statut").text() + $(a).find(".nom").text() > $(a).find(".statut").text() + $(b).find(".nom").text();
        });
        $("#index").html(alphabeticallyOrderedDivs);
        flag_statut=0;
    }
});

/* TYPE */
$('#type').on('click', function () {
    if (flag_type == 0) {
        $(".sort").hide();
        $("#type_ASC").show();
        var alphabeticallyOrderedDivs = $divs.sort(function (a, b) { 
            return $(a).find(".type").text() + $(a).find(".nom").text() > $(b).find(".type").text() + $(b).find(".nom").text(); 
        });
        $("#index").html(alphabeticallyOrderedDivs);
        flag_type=1;
    } else {
        $(".sort").hide();
        $("#type_DSC").show();
        var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
            return $(b).find(".type").text() + $(a).find(".nom").text() > $(a).find(".type").text() + $(b).find(".nom").text(); 
        });
        $("#index").html(alphabeticallyOrderedDivs);
        flag_type=0;
    }
});