Jquery - 按孩子的innerHTML对DIV进行排序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7831712/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery - sort DIV's by innerHTML of children
提问by iammatthew2
I've got html that looks something like this:
我的 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>
And I want to be able to sort by .price or by .style
我希望能够按 .price 或 .style 排序
I suspect that this post partially answers my question: Sort Divs in Jquery Based on Attribute 'data-sort'?
我怀疑这篇文章部分回答了我的问题：基于属性“数据排序”在 Jquery 中排序 Div？
And this plugin comes close to doing what I need (since it can handle child attributes) but it does not seem to go as far as children's innerHTML: http://tinysort.sjeiti.com/
这个插件接近做我需要的东西（因为它可以处理子属性）但它似乎没有达到儿童的innerHTML：http: //tinysort.sjeiti.com/
Any help will be appreciated by this noob.
这个菜鸟将不胜感激任何帮助。
回答by Shawn Chin
To do this sort directly using the child values and without a plugin, you could use something like:
要直接使用子值而不使用插件进行这种排序，您可以使用以下内容：
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);
}
Sorting by price can then be done as such:
然后可以按价格排序：
sortUsingNestedText($('#sortThis'), "div", "span.price");
The function is parametrised so that it can be easily reused with other divs and different sort keys.
该函数是参数化的，因此它可以很容易地与其他 div 和不同的排序键重用。
Here's a demo: http://jsfiddle.net/tc5dc/
这是一个演示：http: //jsfiddle.net/tc5dc/
Using the tinysort plugin
使用 tinysort 插件
Alternatively, if you can benefit from the features provided by the tinysortplugin (mentioned in question), you could dynamically augment your divs to suit the plugin.
或者，如果您可以从tinysort插件（在问题中提到）提供的功能中受益，您可以动态地增加您的 div 以适应插件。
Check out this demo: http://jsfiddle.net/6guj9/
看看这个演示：http: //jsfiddle.net/6guj9/
In the example, we first add the priceand stylevalues as data attributes of the holding div:
在示例中，我们首先添加price和style值作为持有 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());
});
We're then free to use tinysort to sort on the relevant attributes. Sorting by price would be simply:
然后我们可以自由地使用 tinysort 对相关属性进行排序。按价格排序很简单：
$("#sortThis>div").tsort({attr:"data-price"});
Changing the sort order and keys can be done by simply passing in different config objects. The linked demo shows one way to do this, but you can probably come up with a better scheme to suit your needs.
可以通过简单地传入不同的配置对象来更改排序顺序和键。链接的演示显示了一种方法，但您可能会想出一个更好的方案来满足您的需求。
回答by Marco Johannesen
You can sort with jquery by doing
您可以通过执行使用 jquery 进行排序
var mylist = $('ul');
var listitems = mylist.children("li");
listitems.sort(function(a, b) {
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$(mylist).append(listitems);
It automaticly sort by price if you do
如果你这样做，它会自动按价格排序
var mylist = $('#sortThis');
var listitems = mylist.children("div");
listitems.sort(function(a, b) {
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
console.log((compA < compB) ? -1 : (compA > compB) ? 1 : 0);
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$(mylist).append(listitems);
Ill see if i cant scratch something out with an if :)
我会看看我是否不能用 if 刮掉一些东西:)
Got something like:
得到了类似的东西：
if(sortorder === 'price') {
var mylist = $('#sortThis');
var listitems = mylist.children("div");
listitems.sort(function(a, b) {
var compA = $(a).children('.price').text().toUpperCase();
var compB = $(b).children('.price').text().toUpperCase();
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$(mylist).append(listitems);
} else if (sortorder === 'style') {
var mylist = $('#sortThis');
var listitems = mylist.children("div");
listitems.sort(function(a, b) {
var compA = $(a).children('.style').text().toUpperCase();
var compB = $(b).children('.style').text().toUpperCase();
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$(mylist).append(listitems);
}
回答by Abdennour TOUMI
Use my jquery plugin SortContent :
使用我的 jquery 插件 SortContent ：
$('#sortThis').sortContent({asc:true});
You can use helper to sort according to the suitable conten that you want.
您可以使用助手根据您想要的合适内容进行排序。
$('#sortThis').sortContent({asc:true,helper:function(e){return $(e).find('.price').html()}})
if you want to reverse order ,set falseto ascoption
如果你想倒序，设置false为asc选项
Another note, you can select directly children of div instead of parent: It is the same :
另一个注意事项，您可以直接选择 div 的子级而不是父级：它是相同的：
$('#sortThis>div').sortContent({asc:true,helper:function(e){return $(e).find('.price').html()}})
DEMO :
演示：
回答by Col.Cook
The first part of the marked answer does not sort correctly, I tested it using numbers from 1 - 100 and it misinterpreted anything under 10. The reason being it works on a text value and the ASCII code instead of the actual numeric value.
标记答案的第一部分排序不正确，我使用 1 - 100 的数字对其进行了测试，它误解了 10 以下的任何内容。原因是它适用于文本值和 ASCII 代码，而不是实际数值。
Here I have converted the text values to Integers using parseInt() before sorting.
在这里，我在排序之前使用 parseInt() 将文本值转换为整数。
function sortUsingNestedText(parent, childSelector, keySelector) {
var items = parent.children(childSelector).sort(function(a, b) {
var vA = parseInt($(keySelector, a).text());
var vB = parseInt($(keySelector, b).text());
return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
});
parent.append(items);
}
Then we call it the same
然后我们称之为相同
sortUsingNestedText($('#sortThis'), "div", "span.price");
