我需要能够根据子元素的data-price属性对div列表进行排序。 这是我的标记:
<div class="container">
<div class="terminal" data-price="195">
<h3>195</h3>
</div>
195 - I should come in 2nd.
</div>
<div class="container">
<div class="terminal" data-price="220">
<h3>220</h3>
</div>
220 - I should come in 3rd.
</div>
<div class="container">
<div class="terminal" data-price="130">
<h3>130</h3>
</div>
130 - I should come in 1st.
</div>
这是我到目前为止的脚本:
function sorter(a, b) {
return a.getAttribute('data-price') - b.getAttribute('data-price');
};
$(document).ready(function () {
var sortedDivs = $(".terminal").toArray().sort(sorter);
$.each(sortedDivs, function (index, value) {
$(".container", this).html(value);
//console.log(value);
});
});
结果应该替换现有的标记。我无法上班。需要改变什么?
答案 0 :(得分:11)
以下内容应该有效:
$('.container').sort(function (a, b) {
return $(a).find('.terminal').data('price') - $(b).find('.terminal').data('price');
}).each(function (_, container) {
$(container).parent().append(container);
});
虽然我建议不要在没有共同父母的情况下这样做。如果存在其他子节点,$(container).parent().append(container);
部分可能会出现问题。
演示:http://jsbin.com/UHeFEYA/1/
或者你可以这样做:
$('.terminal').sort(function (a, b) {
return $(a).data('price') - $(b).data('price');
}).map(function () {
return $(this).closest('.container');
}).each(function (_, container) {
$(container).parent().append(container);
});
答案 1 :(得分:0)
如果您想将它们放在body
中,您可以这样做:
function sorter(a, b) {
return a.getAttribute('data-price') - b.getAttribute('data-price');
};
var sortedDivs = $(".terminal").toArray().sort(sorter);
$(".container").remove(); //removing the old values
$.each(sortedDivs, function (index, value) {
$('body').append(value); //adding them to the body
});