Question

我在页面中有十个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来完成这个？它必须在客户端完成。

我尝试使用datasort插件，但没有运气，所以寻找新的想法和建议。谢谢！

Answer 1

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

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

现在使用JavaScript sort functions对此进行排序并附加到dom。这比移动dom对象更有效。

Answer 2

您可以使用本机排序功能，但问题是您必须提供比较机制：

function sortByPrice(a,b){
    return $(a).find('.productPriceForSorting').text() > $(b).find('.productPriceForSorting').text();
}

然后您可以使用以下方法对元素进行排序：

$('.productContainer').sort(sortByPrice);

在对元素进行排序后，您需要更新html，因此您应该清空产品容器，然后按新顺序附加已排序的元素：

function reorderEl(el){
    var container = $('#productList');
    container.html('');
    el.each(function(){
        $(this).appendTo(container);
    });
}

全力以赴：

reorderEl($('.productContainer').sort(sortByPrice));

这是一个有效的例子：http://jsfiddle.net/gion_13/jKJc3/

Answer 3

使用像this sorting plugin之类的东西，你只需要比较器函数，如：

function sortByTag(a, b) {
  $(a).find('a').first().text() > $(b).find('a').first().text();
}

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

3 个答案: