Хорошо, я пытаюсь сделать так, чтобы 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, но тогда я смогу получить только самое высокое значение, какие-либо предложения?
3 ответа
Сортируйте 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>
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
//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>
Похожие вопросы
Связанные вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.