根据价格过滤

Question

我目前正在尝试使用jQuery过滤产品。 定价低/高。 我已经成功完成了此操作，但是一旦单击过滤器，我的产品就会失去定位，我也不完全知道为什么。 它们达到最大宽度，并完全忽略其引导程序类。

下面的示例代码：

单击链接，您将明白我的意思。 有任何想法吗？

 var ascending = false; $('.tab-content').on('click', '.sortByPrice', function() { var sorted = $('.results-row').sort(function(a, b) { return (ascending == (convertToNumber($(a).find('.price').html()) < convertToNumber($(b).find('.price').html()))) ? 1 : -1; }); ascending = ascending ? false : true; $('.results').html(sorted); }); var convertToNumber = function(value) { return parseFloat(value.replace('$', '')); } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <div class="tab-content"> <div id="filters"> <p> <a class="sortByPrice" href="#">Sort by Price</a> </p> </div> </div> <div class="results"> <div class="container-fluid"> <div class="row mb-4"> <div class="col-md-3"> <div class="results-row"> <figure class="card card-product"> <div class="img-wrap item"><img src="http://kb4images.com/Random-Image/number-148116.html"> </div> <figcaption class="info-wrap"> <h4 class="title">Good product</h4> <p class="desc">Some small description goes here</p> </figcaption> <div class="bottom-wrap"> <a href="" class="btn btn-sm btn-primary float-right">Order Now</a> <div class="price-wrap h5"> <span class="price-new price">$1280</span> <del class="price-old">$1980</del> </div> <!-- price-wrap.// --> </div> <!-- bottom-wrap.// --> </figure> </div> <!-- col // --> </div> <div class="col-md-3"> <div class="results-row"> <figure class="card card-product"> <div class="img-wrap item"><img src="http://kb4images.com/Random-Image/number-148116.html"> </div> <figcaption class="info-wrap"> <h4 class="title">Good product</h4> <p class="desc">Some small description goes here</p> </figcaption> <div class="bottom-wrap"> <a href="" class="btn btn-sm btn-primary float-right">Order Now</a> <div class="price-wrap h5"> <span class="price-new price">$1080</span> <del class="price-old">$1980</del> </div> <!-- price-wrap.// --> </div> <!-- bottom-wrap.// --> </figure> </div> </div> <!-- col // --> </div> <!-- row.// --> </div> </div> <!--container.//--> 

Answer 1

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

我也为减少混乱改变选择和源我打电话。产品和结果分度，引导类叫做结果 ：

 var ascending = false; $('.tab-content').on('click', '.sortByPrice', function() { var sorted = $('.product').sort(function(a, b) { return (ascending == (convertToNumber($(a).find('.price').html()) < convertToNumber($(b).find('.price').html()))) ? 1 : -1; }); ascending = ascending ? false : true; $('.results').html(sorted); }); var convertToNumber = function(value) { return parseFloat(value.replace('$', '')); } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <div class="tab-content"> <div id="filters"> <p> <a class="sortByPrice" href="#">Sort by Price</a> </p> </div> </div> <div> <div class="container-fluid"> <div class="row mb-4 results"> <div class="col-md-3 product"> <div> <figure class="card card-product"> <div class="img-wrap item"><img src="http://kb4images.com/Random-Image/number-148116.html"> </div> <figcaption class="info-wrap"> <h4 class="title">Good product</h4> <p class="desc">Some small description goes here</p> </figcaption> <div class="bottom-wrap"> <a href="" class="btn btn-sm btn-primary float-right">Order Now</a> <div class="price-wrap h5"> <span class="price-new price">$1280</span> <del class="price-old">$1980</del> </div> <!-- price-wrap.// --> </div> <!-- bottom-wrap.// --> </figure> </div> <!-- col // --> </div> <div class="col-md-3 product"> <div> <figure class="card card-product"> <div class="img-wrap item"><img src="http://kb4images.com/Random-Image/number-148116.html"> </div> <figcaption class="info-wrap"> <h4 class="title">Good product</h4> <p class="desc">Some small description goes here</p> </figcaption> <div class="bottom-wrap"> <a href="" class="btn btn-sm btn-primary float-right">Order Now</a> <div class="price-wrap h5"> <span class="price-new price">$1080</span> <del class="price-old">$1980</del> </div> <!-- price-wrap.// --> </div> <!-- bottom-wrap.// --> </figure> </div> </div> <!-- col // --> </div> <!-- row.// --> </div> </div> <!--container.//--> 

Answer 2

改变这个

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

至

$('.col-md-3').sort(function(a, b)

因为您正在对results-row进行排序，所以我相信您正在删除与css相关的col-md-3 div（.results-row的父级）。

 var ascending = false; $('.tab-content').on('click', '.sortByPrice', function() { var sorted = $('.col-md-3').sort(function(a, b) { return (ascending == (convertToNumber($(a).find('.price').html()) < convertToNumber($(b).find('.price').html()))) ? 1 : -1; }); ascending = ascending ? false : true; $('.results').html(sorted); }); var convertToNumber = function(value) { return parseFloat(value.replace('$', '')); } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <div class="tab-content"> <div id="filters"> <p> <a class="sortByPrice" href="#">Sort by Price</a> </p> </div> </div> <div class="results"> <div class="container-fluid"> <div class="row mb-4"> <div class="col-md-3"> <div class="results-row"> <figure class="card card-product"> <div class="img-wrap item"><img src="http://kb4images.com/Random-Image/number-148116.html"> </div> <figcaption class="info-wrap"> <h4 class="title">Good product</h4> <p class="desc">Some small description goes here</p> </figcaption> <div class="bottom-wrap"> <a href="" class="btn btn-sm btn-primary float-right">Order Now</a> <div class="price-wrap h5"> <span class="price-new price">$1280</span> <del class="price-old">$1980</del> </div> <!-- price-wrap.// --> </div> <!-- bottom-wrap.// --> </figure> </div> <!-- col // --> </div> <div class="col-md-3"> <div class="results-row"> <figure class="card card-product"> <div class="img-wrap item"><img src="http://kb4images.com/Random-Image/number-148116.html"> </div> <figcaption class="info-wrap"> <h4 class="title">Good product</h4> <p class="desc">Some small description goes here</p> </figcaption> <div class="bottom-wrap"> <a href="" class="btn btn-sm btn-primary float-right">Order Now</a> <div class="price-wrap h5"> <span class="price-new price">$1080</span> <del class="price-old">$1980</del> </div> <!-- price-wrap.// --> </div> <!-- bottom-wrap.// --> </figure> </div> </div> <!-- col // --> </div> <!-- row.// --> </div> </div> <!--container.//-->