Estoy tratando de ordenar algunos elementos secundarios del div #rgMatches con la clase .GroupItem . Algunos de estos elementos secundarios contienen una fecha y hora como texto. Por ejemplo 2022-09-24 16:45:00 . Algunos elementos secundarios no contienen la fecha y la hora. No deben ordenarse.
Con el siguiente script funciona bien. El artículo más nuevo se colocó en la primera posición. Problema: si ejecuto el script por segunda vez, cambia el orden de clasificación. Por ejemplo, tengo 4 elementos con una fecha. Al ejecutar el script nuevamente, el elemento más nuevo obtiene la posición 4.
¿Qué está yendo mal? gracias por tus consejos
function sortingContacts() {
$('#rgMatches .rows .GroupItem').sort(function(a, b) {
if ($(a).find('.creationDate').text() != '') {
return new Date($(a).find('.creationDate').text()) < new Date($(b).find('.creationDate').text()) ? 1 : -1;
} else {
return;
}
}).appendTo('#rgMatches .rows');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div id="rgMatches">
<div class="rows">
<div class="GroupItem">
<div class="creationDate">
2022-09-24 16:10:00
</div>
</div>
<div class="GroupItem">
<div class="creationDate">
2022-09-24 16:05:23
</div>
</div>
<div class="GroupItem">
<div class="creationDate">
2022-09-24 16:05:22
</div>
</div>
<div class="GroupItem">
<div class="creationDate">
2022-09-24 16:05:27
</div>
</div>
<div class="GroupItem">
<div class="creationDate">
</div>
</div>
<div class="GroupItem">
<div class="creationDate">
</div>
</div>
<div class="GroupItem">
<div class="creationDate">
</div>
</div>
</div>
</div>
Hay dos problemas en su código. En primer lugar, debe verificar que el elemento .creationDate tenga contenido en los elementos a y b . En segundo lugar, también debe devolver un valor en el caso de que no sea así, no solo un return; declaración. En el siguiente ejemplo, utilicé 0 , pero esto se puede modificar a 1 o -1 según sea necesario para su caso de uso.
Tenga en cuenta en el ejemplo cómo hacer clic en el botón 'Ordenar' varias veces no cambia el resultado.
function sortingContacts() {
$('#rgMatches .rows .GroupItem').sort((a, b) => {
let aText = $(a).find('.creationDate').text();
let bText = $(b).find('.creationDate').text();
if (aText != '' && bText != '') {
return new Date(aText) < new Date(bText) ? 1 : -1;
} else {
return 0;
}
}).appendTo('#rgMatches .rows');
}
$('button').on('click', sortingContacts);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div id="rgMatches">
<div class="rows">
<div class="GroupItem">
<div class="creationDate">
2022-09-24 16:10:00
</div>
</div>
<div class="GroupItem">
<div class="creationDate">
2022-09-24 16:05:23
</div>
</div>
<div class="GroupItem">
<div class="creationDate">
2022-09-24 16:05:22
</div>
</div>
<div class="GroupItem">
<div class="creationDate">
2022-09-24 16:05:27
</div>
</div>
<div class="GroupItem">
<div class="creationDate">
</div>
</div>
<div class="GroupItem">
<div class="creationDate">
</div>
</div>
<div class="GroupItem">
<div class="creationDate">
</div>
</div>
</div>
</div>
<button>Sort</button>