Javascript 基于价格的过滤

我正在尝试用jQuery过滤我的产品。定价低/高。我已经成功地做到了这一点，但一旦我点击过滤器，我的产品就会失去它们的定位，我也不完全清楚为什么。它们走到最大宽度，完全忽略它们的引导类

示例代码如下：

点击链接，你就会明白我的意思。有什么想法吗

var升序=false；
$（'.tab content'）。在（'click'，'.sortByPrice'，函数（）上{
var sorted=$（'.results行'）.sort（函数（a，b）{
返回（升序）==
（convertToNumber（$（a）.find（'.price'）.html（））<
convertToNumber（$（b）.find（'.price'）.html（））？1:-1；
});
升序=升序？假：真；
$（'.results'）.html（已排序）；
});
var CONVERTONUMBER=函数（值）{
返回parseFloat（value.replace（'$'，''）；
}

好产品
这里有一些小的描述
$1280 $1980
好产品
这里有一些小的描述
$1080 $1980

更改此选项

$('.results-row').sort(function(a, b)

到

由于您正在对

结果行进行排序

我相信您正在删除与之相关的

col-md-3

div（.results行的父级）

var升序=false；
$（'.tab content'）。在（'click'，'.sortByPrice'，函数（）上{
变量排序=$（'.col-md-3'）。排序（函数（a，b）{
返回（升序）==
（convertToNumber（$（a）.find（'.price'）.html（））<
convertToNumber（$（b）.find（'.price'）.html（））？1:-1；
});
升序=升序？假：真；
$（'.results'）.html（已排序）；
});
var CONVERTONUMBER=函数（值）{
返回parseFloat（value.replace（'$'，''）；
}

好产品
这里有一些小的描述
$1280 $1980
好产品
这里有一些小的描述
$1080 $1980

更改此选项

$('.results-row').sort(function(a, b)

到

由于您正在对

结果行进行排序

我相信您正在删除与之相关的

col-md-3

div（.results行的父级）

var升序=false；
$（'.tab content'）。在（'click'，'.sortByPrice'，函数（）上{
变量排序=$（'.col-md-3'）。排序（函数（a，b）{
返回（升序）==
（convertToNumber（$（a）.find（'.price'）.html（））<
convertToNumber（$（b）.find（'.price'）.html（））？1:-1；
});
升序=升序？假：真；
$（'.results'）.html（已排序）；
});
var CONVERTONUMBER=函数（值）{
返回parseFloat（value.replace（'$'，''）；
}

好产品
这里有一些小的描述
$1280 $1980
好产品
这里有一些小的描述
$1080 $1980

这将起作用，因为您使用了错误的选择器，并替换了bootstrap.container fluid和.row-mb-4所需的两个div：

我还更改了选择器，以减少混淆，并使用名为.results的引导类调用了.product和result div

var升序=false；
$（'.tab content'）。在（'click'，'.sortByPrice'，函数（）上{
var sorted=$（'.product'）.sort（函数（a，b）{
返回（升序）==
（convertToNumber（$（a）.find（'.price'）.html（））<
convertToNumber（$（b）.find（'.price'）.html（））？1:-1；
});
升序=升序？假：真；
$（'.results'）.html（已排序）；
});
var CONVERTONUMBER=函数（值）{
返回parseFloat（value.replace（'$'，''）；
}

好产品
这里有一些小的描述
$1280 $1980
好产品
这里有一些小的描述
$1080 $1980

这将起作用，因为您使用了错误的选择器，并替换了bootstrap.container fluid和.row-mb-4所需的两个div：

我还更改了选择器以减少错误