j'ai un problème de tri avec jQuery.Les éléments ne sont pas triés .J'ai utilisé JavaScript, mais cela fonctionne bien avec moi si l'attribut est des chiffres mais pas du texte. Je peux résoudre le problème à l'aide de l'annexe, mais ce n'est pas ce qui est prêt à utiliser. Quelqu'un peut-il vous demander de tirer dessus de ce code.
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
<div class="listing-item" data-listing-title="a">
a
</div>
<div class="listing-item" data-listing-title="z">
z
</div>
<div class="listing-item" data-listing-title="b">
b
</div>
<div class="listing-item" data-listing-title="c">
c
</div>
</div>3 Réponses :
Vous devez juste retourner un numéro dans la fonction de tri. Retour -1 Si le premier devrait être placé avant la seconde. Donc, Triez le tri croissant
Vous pouvez ajouter plus de conditions. p>
et mettre dans la liste HTML la liste triée ( p> si ($ (A) .Data ("titre-title")> $ (b) .Data ("titre-title")) renvoie 1 code> -> décroissant
Si ($ (A) .Data ("titre-title") = $ (b) .Data ("listing-title")) renvoie 0 code> -> pas de tri p> gg code> au lieu de divison code>) p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
<div class="listing-item" data-listing-title="a">
a
</div>
<div class="listing-item" data-listing-title="z">
z
</div>
<div class="listing-item" data-listing-title="b">
b
</div>
<div class="listing-item" data-listing-title="c">
c
</div>
</div>
Essayez d'utiliser p>
.Localecompare () code>. J'ai tiré ce contenu de travail à partir de jQuery - Tri des contenus de div (/a>
<!DOCTYPE html>
<htm>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var divList = $(".listing-item");
divList.sort(function(a, b) {
return $(a).data("listing-title").toUpperCase().localeCompare($(b).data("listing-title").toUpperCase());
});
$("#list").html(divList);
});
</script>
</head>
<body>
<div id="list">
<div class="listing-item" data-listing-title="a">a</div>
<div class="listing-item" data-listing-title="z">z</div>
<div class="listing-item" data-listing-title="b">b</div>
<div class="listing-item" data-listing-title="c">c</div>
</div>
</body>
</html>
Merci, cela résolvez le problème. Mais pouvez-vous décrire pourquoi vous avez utilisé TUPPERCASE
Vous n'avez pas besoin de jQuery pour cela, et je pense que le problème est votre fonction de comparaison, quelque chose comme ça, devrait faire le travail pour vous:
//First select the items
const items = document.querySelectorAll('div#list > .listing-item');
//Next, transform this to an array using `from`, then compare
//using `sort`, finally iterate over the sorted array using `forEach`,
//and append element in the sorted array to the `#list`.
//
Array
.from(items)
.sort((x,y) => {
const valueX = x.dataset.listingTitle;
const valueY = y.dataset.listingTitle;
if(valueX > valueY) return 1;
else if(valueX < valueY) return -1;
else return 0;
})
.forEach(element => document.getElementById('list').appendChild(element));
Vérifiez La documentation pour le < code> .sort () rappel. Il doit renvoyer un numéro pour indiquer comment les deux éléments comparés doivent être commandés; Votre rappel renvoie un booléen (
true oufalse ), et cela ne fonctionnera pas.@Pointy avez-vous une suggestion de savoir comment résoudre un tel problème?
Oui, écrivez un comparateur de tri approprié. La chose la plus simple à faire est d'utiliser la chaîne
.Localecompare () méthode pour comparer deux chaînes. Il renvoie exactement le type de résultat numérique dont vous avez besoin.