jquery 根据 2 个条件对 div 进行排序

Question

我在我的网站上开发了一种使用各种排序选项对 div (.ligne) 进行排序的方法。按名称、日期、状态和类型排序。我有一个运行良好的 jquery 代码，我需要多做一些工作以减轻它的负担，但它确实有效。

当点击每个 header "project"、"year"、"status"、"type" 时，再次点击时我的 div 被排序为 Asc 或 Dsc。

我现在想做的是在对状态div进行排序时能够做到，有2个条件，首先按状态名称对状态div进行排序，然后按项目名称对其进行排序。

实际上有 2 个标准。我找不到办法。

这是一个 jsfiddle :

http://jsfiddle.net/C2heg/740/

有人可以帮我吗？

这是我的 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>

我的 CSS :

body {font-size:12px;line-height:16px;}
.row.ligne {border-top:1px solid black;cursor:pointer}
.content {display:none}
.title {position: absolute;cursor:pointer}
.titre {position:fixed;width:100%;background-color:white;z-index:100}
#index {padding-top:16px;}

和我的 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)

  });

Answer 1

您使用的是简单的 div sort 函数，它正在进行字符串 [列值] 比较。您只需要以适当的方式在项目名称后附加 status/type 字符串比较。

这是代码，当你按状态或类型排序时，在按排序列排序后，它会自动排序在内部按升序排列项目名称[在具有相同排序列值的组中]。如果您希望该用户可以按多列排序，那么您可以使用此代码作为提示来扩展此功能。

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

jquery 根据 2 个条件对 div 进行排序

jquery sort divs based on 2 conditions

javascript

sorting

jquery

click

twitter-bootstrap-3