JQuery 升序和降序排序（不是表格）答案

【问题标题】：JQuery Sort ascending and descending (Not a table)JQuery 升序和降序排序（不是表格）
【发布时间】：2018-10-08 00:52:48
【问题描述】：

MVC5 中排序价格的脚本有问题

这是一个视图

@model IEnumerable<WebApplication.Models.Product>
@foreach (var Model in Model){
   <div class="col-md-3">
    <div class="product-men">

        <div class="men-pro-item simpleCart_shelfItem">

            <div class="men-thumb-item">
                <img src="~/Images/@Model.Product_Image" alt="" class="pro-image-front">
                <img src="~/Images/@Model.Product_Image" alt="" class="pro-image-back">
                <div class="men-cart-pro">
                    <div class="inner-men-cart-pro">
                        <a href="single.html" class="link-product-add-cart">Quick View</a>
                    </div>
                </div>


            </div>
            <div class="item-info-product">
                <h4><a href="">@Model.Product_Name</a></h4>
                <div class="info-product-price">
                    <span class="item_price price">$@Model.Product_Discount</span>
                    @if (Model.Product_Discount == Model.Product_Price)
                    {
                    }
                    else
                    {
                        <del>$@Model.Product_Price</del>}

                </div>
                <div class="snipcart-details top_brand_home_details item_add single-item hvr-outline-out button2">
                    <form action="#" method="post">
                        <fieldset>
                            <input type="hidden" name="cmd" value="_cart" />
                            <input type="hidden" name="add" value="1" />
                            <input type="hidden" name="business" value=" " />
                            <input type="hidden" name="item_name" value="Formal Blue Shirt" />
                            <input type="hidden" name="amount" value="30.99" />
                            <input type="hidden" name="discount_amount" value="1.00" />
                            <input type="hidden" name="currency_code" value="USD" />
                            <input type="hidden" name="return" value=" " />
                            <input type="hidden" name="cancel_return" value=" " />
                            <input type="submit" name="submit" value="Add to cart" class="button" />
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>}

片段：

var ascending = false;

$('.tab-content').on('click', '.sortByPrice', function() {

  var sorted = $('.men-pro-item').sort(function(a, b) {
    return (ascending ==
      (convertToNumber($(a).find('.price').html()) <
        convertToNumber($(b).find('.price').html()))) ? 1 : -1;
  });
  ascending = ascending ? false : true;

  $('.product-men').html(sorted);
});

var convertToNumber = function(value) {
  return parseFloat(value.replace('$', ''));
}

<!-- Need to add the html data before click, here -->



<!-- Button click sort -->
<div class="tab-content">
  <h6>Sort By</h6>
  <div id="filters">
    <p>
      <a class="sortByPrice" href="#">Sort by Price</a>
    </p>
  </div>
  <div class="clearfix"></div>
</div>

当我单击按价格排序时出现此问题，此 javascript 运行良好，但重复数据。因为foreach。但我无法删除这个 foreach。如果有，请帮助我修复此代码或新代码。不是表

Result Image

【问题讨论】：

你能在排序前用 html 创建一个工作的 sn-p，这样我们就可以看到它的作用了吗？
我不能，因为它有数据库，在排序之前这是一个产品页面，然后单击排序价格高>低。但它是重复的数据。如下图
因为您有多个 <div class="product-men"> 元素，并且您的 $('.product-men').html(sorted); 代码行为每个元素设置了 html（您需要在 foreach 循环周围添加一个封闭元素，并为此设置 html元素
@ThongHuynh 你不需要数据库来创建 MCVE。因为它与问题无关。只需复制生成的 HTML 并从中构建示例
这对我来说太难了。我需要一个关于排序的代码（不是表格）..

标签： javascript jquery asp.net-mvc-5

【解决方案1】：

我使用了您的代码，最终得出了与斯蒂芬在他的 cmets 中所说的相同的解决方案（我在完成后就看到了）。

这是一个有效的 sn-p，我在其中添加了一些值来模拟它：

var ascending = false;

$('.tab-content').on('click', '.sortByPrice', function() {

  var sorted = $('.men-pro-item').sort(function(a, b) {
    return (ascending ==
      (convertToNumber($(a).find('.price').html()) <
        convertToNumber($(b).find('.price').html()))) ? 1 : -1;
  });
  ascending = ascending ? false : true;

  $('#products').html(sorted); // Modified

});

var convertToNumber = function(value) {
  return parseFloat(value.replace('$', ''));
}

h4 {
  margin: 0;
}

.item-info-product * {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="products"><!-- Added -->
  <div class="col-md-3">
    <div class="product-men">
      <div class="men-pro-item simpleCart_shelfItem">
        <div class="item-info-product">
          <h4><a href="">Product_Name</a></h4>
          <div class="info-product-price">
            <span class="item_price price">$30.00</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="product-men">
      <div class="men-pro-item simpleCart_shelfItem">
        <div class="item-info-product">
          <h4><a href="">Product_Name</a></h4>
          <div class="info-product-price">
            <span class="item_price price">$25.00</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="product-men">
      <div class="men-pro-item simpleCart_shelfItem">
        <div class="item-info-product">
          <h4><a href="">Product_Name</a></h4>
          <div class="info-product-price">
            <span class="item_price price">$35.00</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div> <!-- Added -->

<!-- Button click sort -->
<div class="tab-content">
  <h6>Sort By:</h6>
  <div id="filters">
    <p><a class="sortByPrice" href="#">Price</a></p>
  </div>
  <div class="clearfix"></div>
</div>

希望对你有帮助。

【讨论】：