我有html看起来像这样：
<div id="sortThis"> <div id="1">Price:<span class="price">20</span><span class="style">blue</span></div> <div id="2">Price:<span class="price">23</span><span class="style">red</span></div> <div id="3">Price:<span class="price">10</span><span class="style">red</span></div> <div id="4">Price:<span class="price">29</span><span class="style">green</span></div> <div id="5">Price:<span class="price">35</span><span class="style">blue</span></div> </div>
我想要能够按.price或.style排序
我怀疑这篇文章部分回答了我的问题：Sort Divs in Jquery Based on Attribute ‘data-sort’?
和这个插件接近做我需要的(因为它可以处理孩子的属性)，但它似乎并没有像孩子的内部HTML：http://tinysort.sjeiti.com/
任何帮助将赞赏这个noob。
解决方法
要直接使用子值而不使用插件来执行此操作，您可以使用类似以下内容：
function sortUsingNestedText(parent,childSelector,keySelector) {
var items = parent.children(childSelector).sort(function(a,b) {
var vA = $(keySelector,a).text();
var vB = $(keySelector,b).text();
return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
});
parent.append(items);
}
然后可以按照价格进行排序：
sortUsingNestedText($('#sortThis'),"div","span.price");
函数是参数化的，以便它可以很容易地与其他div和不同的排序键重复使用。
这里有一个演示：http://jsfiddle.net/tc5dc/
使用tinysort插件
或者，如果您可以从tinysort插件(提及的)提供的功能中受益，您可以动态扩充您的div以适应插件。
看看这个demo：http://jsfiddle.net/6guj9/
在示例中，我们首先将价格和样式值添加为持有div的数据属性：
var sortThis = $('#sortThis').children("div");
sortThis.each(function() {
var p = $(this);
p.attr("data-price",p.find("span.price").text());
p.attr("data-style",p.find("span.style").text());
});
然后我们可以使用tinysort对相关属性进行排序。按价格排序将简单：
$("#sortThis>div").tsort({attr:"data-price"});
更改排序顺序和键可以通过简单地传递不同的配置对象来完成。链接演示展示了一种方法来做到这一点，但你可能想出一个更好的方案，以满足您的需要。
