web-dev-qa-db-fra.com

Jquery - trier les DIV par innerHTML des enfants

J'ai du HTML qui ressemble à ceci:

<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>

Et je veux pouvoir trier par .prix ou par .style

Je soupçonne que ce message répond partiellement à ma question: Trier les divisions dans Jquery en fonction de l'attribut 'data-sort'?

Et ce plugin est proche de faire ce dont j'ai besoin (car il peut gérer les attributs enfants) mais il ne semble pas aller aussi loin que innerHTML pour les enfants: http://tinysort.sjeiti.com/

Toute aide sera appréciée par ce noob.

jquerysortinghtmljquery-ui-sortable
36
iammatthew2

Pour faire ce tri directement en utilisant les valeurs enfants et sans plugin, vous pouvez utiliser quelque chose comme:

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);
}

Le tri par prix peut alors se faire comme tel:

sortUsingNestedText($('#sortThis'), "div", "span.price");

La fonction est paramétrée de façon à pouvoir être facilement réutilisée avec d'autres divs et différentes clés de tri.

Voici une démo: http://jsfiddle.net/tc5dc/

Utilisation du plugin tinysort

Alternativement, si vous pouvez bénéficier des fonctionnalités fournies par le plugin tinysort (mentionné en question), vous pouvez augmenter dynamiquement vos divs pour l'adapter au plugin.

Découvrez cette démo: http://jsfiddle.net/6guj9/

Dans l'exemple, nous ajoutons d'abord les valeurs price et style en tant qu'attributs de données du div de maintien:

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());
});

Nous sommes ensuite libres d'utiliser tinysort pour trier les attributs pertinents. Le tri par prix serait simplement:

$("#sortThis>div").tsort({attr:"data-price"});

La modification de l'ordre de tri et des clés peut être effectuée en passant simplement différents objets de configuration. La démonstration liée montre une façon de le faire, mais vous pouvez probablement trouver un meilleur schéma pour répondre à vos besoins.

69
Shawn Chin

Vous pouvez trier avec jquery en faisant

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);

Il trie automatiquement par prix si vous le faites

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);

Je vais voir si je ne peux pas rayer quelque chose avec un si :)

Vous avez quelque chose comme:

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);

}
9
Marco Johannesen

La première partie de la réponse marquée ne se trie pas correctement, je l'ai testée en utilisant des nombres de 1 à 100 et elle a mal interprété quoi que ce soit sous 10. La raison étant qu'elle fonctionne sur une valeur de texte et le code ASCII au lieu de la valeur numérique réelle.

Ici, j'ai converti les valeurs de texte en entiers en utilisant parseInt () avant de trier.

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);
}

Ensuite, nous l'appelons la même

sortUsingNestedText($('#sortThis'), "div", "span.price");
1
Col.Cook

Utilisez mon plugin jquery SortContent:

$('#sortThis').sortContent({asc:true});

Vous pouvez utiliser helper pour trier selon le contenu approprié que vous souhaitez.

$('#sortThis').sortContent({asc:true,helper:function(e){return $(e).find('.price').html()}})

si vous voulez inverser l'ordre, définissez l'option false sur asc

Autre remarque, vous pouvez sélectionner directement les enfants de div au lieu de parent: C'est la même chose:

$('#sortThis>div').sortContent({asc:true,helper:function(e){return $(e).find('.price').html()}})

DÉMO:

http://jsfiddle.net/abdennour/ytmry/

1
Abdennour TOUMI