javascript - 如何使用 javascript/jQuery 根据内部 div 元素内容/值对 div 元素进行排序？

Question

我在一个页面中有 X 个 div，每个 div 项代表一个产品，如下所示:

<div class="productContainer">
<li>
    <img src="my-product-image.jpg"></a>
    <div class="productInfo">
        <h4>
            <!-- SORT ALL DIVS BASED ON A TAG CONTENT -->
            <a class="productTitleForSorting" href="product-page-link">NAME</a><br>
        </h4>
        <div class="product-price">               
            <span id="lowestPrice">PRICE:
            <!-- OR SORT ALL DIVS BY PRODUCT PRICE SPAN CONTENT -->
            <span class="productPriceForSorting">$XX.XX</span></span>
        </div>
    </div>               
</li>
</div>

然后我有一个选择列表/下拉列表，我想在其中按价格或字母顺序对 div 进行排序。

例如，假设我有 10 个 div(10 个产品)，就像上面在单个页面上的那样。我希望能够在选择列表更改时按标题 (a.productTitleForSorting 内容) 或价格 (span.productPriceForSorting) 进行排序。

我有什么想法可以用 Javascript/jQuery 来完成这个任务吗？它必须在客户端完成。

我尝试使用数据排序插件，但效果不佳，因此寻找新的想法和建议。谢谢!

Answer 1

我不建议对 dom 进行排序和重新排序。如果必须在客户端完成，则存储 javascript 数组并对其进行排序。例如:

var items = [{price:3,name:"something"}, {price:10,name:"somethingelse"}];

现在使用JavaScript sort functions对其进行排序并附加到 dom。这比移动 dom 对象要高效得多。