javascript - 按产品价格订购元素

Question

我正在尝试从网站订购不同的产品，但无法正确订购。

基本上我需要获取每件商品的价格并从最贵的到最便宜的排序。

我尝试了以下代码，但它消失了所有内容，并且一直没有以正确的方式对它们进行排序:

var divList = $(".block-level.h2");
divList.sort(function(a, b){
    return $(a).data(".block-level.h2")-$(b).data(".block-level.h2")
});
$(".grid").html(divList);

我无权修改 HTML，因此必须使用我现在拥有的代码来完成，只能通过 jQuery 添加内容。

有人可以给我提示或帮助我吗？

谢谢。

Answer 1

对于您对产品网格项目进行排序的请求，这里是您可以使用的 jQuery 代码。

var values = [];
$('.block-level.h2').each(function() {
    var temp = Array();
    temp['value'] = parseInt($(this).html().replace('$',''));
    temp['element'] = $(this).closest('.grid-item');
    values.push(temp);
});
values.sort(function(a,b) { return b.value - a.value; });
var sortedHtml = '';
$.each(values, function(index, obj) { 
    if((index+1)%3==1) {
        sortedHtml+=('<div class="grid product-cards__row"><div class="grid-item one-third palm-one-whole product-cards__item">'+$(obj.element).html()+'</div>');
    } else if((index+1)%3==0) {
        sortedHtml+=('<div class="grid-item one-third palm-one-whole product-cards__item">'+$(obj.element).html()+'</div></div>');
    } else {
        sortedHtml+=('<div class="grid-item one-third palm-one-whole product-cards__item">'+$(obj.element).html()+'</div>');
    }
});
$('.product-cards').html(sortedHtml);

希望这对您有所帮助!