Eu tenho uma página web de bate-papo que tem um DIV para cada membro. O DIV é o seguinte:
Cada um dos DIV’s “chatmember” tem mais conteúdo dentro deles – img, texto, etc. Como posso reordenar os div’s de AZ usando o JQUERY? Eu quero manter o conteúdo com cada DIV como é – basta mover o ID para se assemelhar a AZ.
Você pode obter uma coleção de elementos div e, em seguida, usar sort() para classificar por seu atributo id e, em seguida, anexá-lo ao contêiner, reordenando-os efetivamente.
var parent = $('#chatCenterMembers'); parent.children('div').sort(function(a, b) { return a.id > b.id; }).appendTo(parent);
jsFiddle .
Aqui está um violino de trabalho .
//Grab the parent container var mylist = $('#chatCenterMembers'); //Get all the child div's in the parent var listitems = mylist.children('div').get(); //Utilize the array.sort listitems.sort(function(a, b) { var compA = $(a).text().toUpperCase(); var compB = $(b).text().toUpperCase(); return (compA < compB) ? -1 : (compA > compB) ? 1 : 0; }); $.each(listitems, function(idx, itm) { mylist.append(itm); });
Código retirado de http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/ e modificado ligeiramente.
Isso deve servir:
// get an array of DOM elements var $elements = $('#chatCenterMembers div').get(); // sort the elements by ID $elements.sort(function(a, b) { if(a.id === b.id) return 0; return a.id < b.id ? -1 : 1; }); // append the elements $('#chatCenterMembers').append($elements);
Pergunta é, pedir por quê? Vamos supor que gostaríamos de pedir esses por classnames de classnames , será semelhante a:
var $members = $('#chatCenterMembers'); $members.children('div').detach().sort(function(a,b) { return a.className.localeCompare(b.className); }).appendTo($members);
jsfiddle: http://jsfiddle.net/mCLxb/
Na verdade, podemos omitir o .detach() aqui, mas por conveniência é bom estar lá.