Question

我在我的网站上开发了一种使用各种排序选项对div（.ligne）进行排序的方法。按名称，按日期，按状态和按类型排序。我有一个运行良好的jquery代码，我需要更多地工作来减轻它，但它的工作原理。

点击每个标题＆＃34;项目＆＃34;，＆＃34;年＆＃34;，＆＃34;状态＆＃34;，＆＃34;输入＆＃34;，我的div被排序为Asc或Dsc再次点击。

我现在要做的就是在对状态div进行排序时要有效，要有两个条件，首先按状态名称对状态div进行排序，然后按项目名称对其进行排序。

实际上是2个标准。我无法找到办法。

这是一个jsfiddle：

任何人都可以帮助我吗？

这是我的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 */
$('#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 sort divs基于2个条件

1 个答案: