我的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/
这个菜鸟会感激任何帮助。
答案 0 :(得分:69)
要直接使用子值而不使用插件进行此类排序,您可以使用以下内容:
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插件(提到的问题)提供的功能中受益,您可以动态扩充您的div以适应插件。
查看此演示:http://jsfiddle.net/6guj9/
在示例中,我们首先将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());
});
然后我们可以自由地使用tinysort对相关属性进行排序。按价格排序只是:
$("#sortThis>div").tsort({attr:"data-price"});
只需传入不同的配置对象即可完成更改排序顺序和键。链接演示显示了一种方法,但您可以提出更好的方案来满足您的需求。
答案 1 :(得分:9)
您可以通过
进行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);
如果你这样做,它会按价格自动排序
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);
我看是否我不能用if:)来解决问题。)
有类似的东西:
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);
}
答案 2 :(得分:1)
使用我的jquery插件SortContent:
$('#sortThis').sortContent({asc:true});
您可以使用帮助程序根据您想要的合适内容进行排序。
$('#sortThis').sortContent({asc:true,helper:function(e){return $(e).find('.price').html()}})
如果您想要撤销订单,请将false
设置为asc
选项
另外注意,您可以直接选择div的子节点而不是父节点:它是相同的:
$('#sortThis>div').sortContent({asc:true,helper:function(e){return $(e).find('.price').html()}})
DEMO:
答案 3 :(得分:1)
标记答案的第一部分没有正确排序,我使用1到100之间的数字进行测试,并且误解了10以下的任何内容。原因是它适用于文本值和ASCII代码而不是实际数值
这里我在排序之前使用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);
}
然后我们称之为
sortUsingNestedText($('#sortThis'), "div", "span.price");
答案 4 :(得分:0)
这对我有用。 此波纹管代码根据价格文本将 div 从低到高缩短。
var gridItems = $("#sortThis").children("div");
gridItems.sort(function(a, b) {
return $('.price',a).text() - $('.price',b).text();
});
$("#sortThis").append(gridItems);