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

我有一个页面的div X量，每格的项表示单一的产品，看起来像这样：如何使用javascript/jQuery根据内部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插件，但没有运气，因此寻找新的想法和建议。谢谢！

来源

2011-07-21 IntricatePixels

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

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

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

来源

2011-07-21 14:32:45

+1同意...... – sje397

使用类似this sorting plugin，你只需要比较的功能，如：

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

来源

2011-07-21 14:34:42 sje397

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

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

那么你可以使用下列元素对你的元素进行分类：

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

Afte R您已经分类的元素，你需要更新HTML，所以你应该清空产品容器，然后追加新顺序排序的元素：

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

把它们放在toghether：

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

这里是一个工作示例：http://jsfiddle.net/gion_13/jKJc3/

来源

2011-07-21 14:48:56

你能找到jquery'sort'函数文档的链接吗？我读它是在1.3.2中添加的，但无法在网站上找到它。 – sje397

我正在使用原生JavaScript排序功能。它不是jQuery。这里是一个例子：'[3,1,6,2,7,234,3,8] .sort（function（a，b）{return a> b;}）;' –

对此，欣赏它，特别是在jsFiddle上放置示例！ – IntricatePixels

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

回答

相关问题