Question

我有一个附加内容的脚本。

我只需要做一次改变，但不知道如何做。

我希望每次点击时都按div的内容进行排序。（ASC to desc或desc to ASC）

他现在所做的是：

我有3个div

<div>Others</div>
<div>Girls</div>
<div>Boy</div>

如果我点击它会改变

<div>Boy Girls Other</div>
<div>>Boy Girls Other</div>
<div>>Boy Girls Other</div>

我的代码：

$("#button-sort").click(function(){
    $(".sorteren div").sort(asc_sort).appendTo('.sorteren');

    function asc_sort(a, b){
        return ($(b).text()) < ($(a).text()) ? 1 : -1;
    }

    function dec_sort(a, b){
        return ($(b).text()) > ($(a).text()) ? 1 : -1;    
    }
});

我之前使用的代码：

var mylist = $('.sorteren');
var listitems = mylist.children('div').get();    
listitems.sort(function(a, b) {
    return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
});

$.each(listitems, function(index, item) {
    mylist.append(item); 
});

我的div structer是：

<div id="drive-content">
  <div class="folderbox">
    <div class="sorteren">
      <div class="items-titel"></div>
    </div>
    <div class="date">
    </div>
  </div>
  <div class="folderbox">
    <div class="sorteren">
      <div class="items-titel"></div>
    </div>
    <div class="date">
    </div>
  </div>
  <div class="folderbox">
    <div class="sorteren">
      <div class="items-titel"></div>
    </div>
    <div class="date">
    </div>
  </div>
</div>

Answer 1

您可以add/remove一个类对asc / desc进行排序，只需将已排序的html分配给一个变量，并将sorteren div的html更改为该变量。

＆＃13;

$("#button-sort").click(function() {
  var sort, el = $('.sorteren')
  sort = el.find('div').sort(el.hasClass('asc') ? dec_sort : asc_sort)
  el.toggleClass('asc')

  function asc_sort(a, b) {
    return ($(b).text()) < ($(a).text()) ? 1 : -1;
  }

  function dec_sort(a, b) {
    return ($(b).text()) > ($(a).text()) ? 1 : -1;
  }

  $(".sorteren").html(sort)
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button-sort">sort</button>

<div class="sorteren">
  <div>Others</div>
  <div>Girls</div>
  <div>Boy</div>
</div>

＆＃13;

如果您有多个.sorteren div并且想要对每个div进行排序，您可以将代码更改为此。

＆＃13;

$("#button-sort").click(function() {
  function asc_sort(a, b) {
    return ($(b).text()) < ($(a).text()) ? 1 : -1;
  }

  function dec_sort(a, b) {
    return ($(b).text()) > ($(a).text()) ? 1 : -1;
  }

  $(".sorteren").each(function() {
    var sort, el = $(this)
    sort = el.find('div').sort(el.hasClass('asc') ? dec_sort : asc_sort)
    el.toggleClass('asc')

    el.html(sort)
  })
})

＆＃13;

.sorteren {
  border: 1px solid black;
  margin: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button-sort">sort</button>

<div class="sorteren">
  <div>Others</div>
  <div>Girls</div>
  <div>Boy</div>
</div>

<div class="sorteren">
  <div>c</div>
  <div>a</div>
  <div>b</div>
</div>

＆＃13;

按divs内容排序（点击）

1 个答案: