这是我的HTML
<div class="products-grid">
<div data-sort="3" class="swiper-slide">Test</div>
<div data-sort="1" class="swiper-slide">Test</div>
<div data-sort="2" class="swiper-slide">Test</div>
</div>
这是我试过的js:
jQuery( document ).ready(function() {
function getSorted(selector, attrName) {
return jQuery(jQuery(selector).toArray().sort(function(a, b){
var aVal = parseInt(a.getAttribute(attrName)),
bVal = parseInt(b.getAttribute(attrName));
return aVal - bVal;
}));
}
getSorted('.products-grid .swiper-slide', 'data-sort');
});
它不起作用。我想在data-sort属性之后对其进行排序。有人可以帮我这个吗?
答案 0 :(得分:1)
您需要将已排序的元素添加到DOM
jQuery(document).ready(function() {
function getSorted(selector, attrName) {
return jQuery(selector).toArray().sort(function(a, b) {
var aVal = parseInt(a.getAttribute(attrName)),
bVal = parseInt(b.getAttribute(attrName));
return aVal - bVal;
});
}
var sortedElements = getSorted('.products-grid .swiper-slide', 'data-sort');
jQuery('.products-grid').append(sortedElements);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="products-grid">
<div data-sort="3" class="swiper-slide">Test 3</div>
<div data-sort="1" class="swiper-slide">Test 1</div>
<div data-sort="2" class="swiper-slide">Test 2</div>
</div>
答案 1 :(得分:0)
这是因为您要排序元素数组,而不是DOM
中的元素
jQuery( document ).ready(function() {
function getSorted(selector, attrName) {
return jQuery(jQuery(selector).toArray().sort(function(a, b){
var aVal = parseInt(a.getAttribute(attrName)),
bVal = parseInt(b.getAttribute(attrName));
return aVal - bVal;
}));
}
$('.products-grid').html( getSorted('.products-grid .swiper-slide', 'data-sort') );
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="products-grid">
<div data-sort="3" class="swiper-slide">Test 3</div>
<div data-sort="1" class="swiper-slide">Test 1</div>
<div data-sort="2" class="swiper-slide">Test 2</div>
</div>
&#13;