Сортировка div на основе атрибута данных в jQuery

Question

Хорошо, я пытаюсь сделать так, чтобы jQuery сортировал div при нажатии кнопки,

Допустим, список выглядит так,

<div class="wrapper">
  <div class="item" data-worth="720">Edgy</div>
  <div class="item" data-worth="420">Blaze</div>
  <div class="item" data-worth="666">Meme</div>
</div>

Затем, после нажатия кнопки, я хочу, чтобы она выплюнула,

   <div class="wrapper">
      <div class="item" data-worth="720">Edgy</div>
      <div class="item" data-worth="666">Meme</div>
      <div class="item" data-worth="420">Blaze</div>
    </div>

В основном сортировка стоит от низкого до высокого, переставляя все и помещая его обратно в упаковщик.

Честно говоря, я понятия не имею, как я буду продолжать это делать, я думал об использовании функции .each в jQuery, но тогда я смогу получить только самое высокое значение, какие-либо предложения?

javascript jquery html css

5

Martijn Ebbens 29 Авг 2017 в 00:56

Answer 1

Сортируйте divs обертки по их data('worth'), а затем добавьте отсортированный список обратно в обертку:

$('button').click(function() {
  $('.wrapper div').sort(function(a, b) {
    return $(b).data('worth') - $(a).data('worth');
  }).appendTo('.wrapper');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Sort</button>
<div class="wrapper">
  <div class="item" data-worth="720">Edgy</div>
  <div class="item" data-worth="420">Blaze</div>
  <div class="item" data-worth="666">Meme</div>
</div>

6

Rick Hitchcock 28 Авг 2017 в 22:09

Answer 2

HTML:

<div class="wrapper">
  <div class="item" data-worth="720">Edgy</div>
  <div class="item" data-worth="420">Blaze</div>
  <div class="item" data-worth="666">Meme</div>
</div>
<button class="clickMe">Sort</button>

JavaScript:

function someFunction(){
  var $wrapper = $('.wrapper');
    $wrapper.find('.item').sort(function (a, b) {
    return +b.dataset.worth - a.dataset.worth;
})
.appendTo( $wrapper );
}
$('body').on('click', '.clickMe', someFunction);

Вот рабочая: JSFiddle

0

Martin Stoyanov 28 Авг 2017 в 22:17

Answer 3

//code taken from: https://stackoverflow.com/questions/6133723/sort-divs-in-jquery-based-on-attribute-data-sort

//All I have done is, presented the code such a way that it is easy for you to understand and use it in your application

function asc_sort(a, b){ return ($(b).data("worth")) > ($(a).data("worth")) ? 1 : -1; }

jQuery.fn.sortDivs = function sortDivs() {
    $(".item", this[0]).sort(asc_sort).appendTo(this[0]);
}

$('#BtnSort').on('click', function(){
    $(".wrapper").sortDivs();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="BtnSort">Sort</button>
<div class="wrapper">
  <div class="item" data-worth="720">Edgy</div>
  <div class="item" data-worth="420">Blaze</div>
  <div class="item" data-worth="666">Meme</div>
</div>

0

Vimalan Jaya Ganesh 28 Авг 2017 в 22:13

Сортировка div на основе атрибута данных в jQuery

3 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript