Estoy tratando de agregar elementos en un div agregando al final del div durante un bucle for. La idea es que tengo registros de una base de datos con un campo "Puntuación total" y quiero los registros con la puntuación más alta en la parte superior.

El contenedor div donde quiero poner los elementos es este:

<div id="fetch-n-sites-output"></div>

Y mi función de devolución de llamada después de una llamada AJAX exitosa es la siguiente:

 function updateNSites(data){ $("#fetch-n-sites-output").empty(); data["fetched-sites"].map(function(element, index){ var cloned = cloneTemplate(index, element); console.log(`Processing site ${index}...`); $("#fetch-n-sites-output").append(cloned); }); }

Para completar, mi función cloneTemplate es esta:

 function cloneTemplate(index, data){ // CLONE TEMPLATE var template = $("#test-template").html().trim(); var clone = $(template); var siteID = data["site_id"]; var totalSiteScore = data["total_site_score"]; // UPDATE CLONE WITH SITE-SPECIFIC INFORMATION // 0. Update ID of div element with site id var mainDiv = $("div.greendiv").eq(index); mainDiv.attr("id", `site-${siteID}`); // 1. Update header with "Site ID: {site_id}" $(`#site-${siteID} > div.reddiv > p.header-text`).text(`Site ID: ${siteID} - Total Score: ${totalSiteScore}`); // 2. Add event handlers // $(`#site-${siteID} div.site-sidenav`).on("click", 'a', function() { // alert("clicky"); // }); $(`#site-${siteID}`).find(".site-navlink").on("click", function () { alert("clicky"); }); // SHOW CLONE clone.removeClass("template-hidden").addClass("template-show"); return clone; }

Cuando recupero 3 sitios, el sitio con la puntuación más alta siempre está en la parte inferior. Esto no tiene sentido para mí, porque mi consulta SQL se ordena por esta puntuación total del sitio. El sitio con la puntuación más alta siempre se coloca en la parte inferior, pero los otros sitios se ordenan correctamente:

Otro problema extraño (que creo que está relacionado con este problema principal) es que los controladores de eventos que agrego en la función cloneTemplate para manejar los clics en las etiquetas <a> (en este momento solo llaman a una alert() para probar) solo funcionan en los elementos distintos del primero:

Mientras que hacer clic en 'GENERAL' en el primer elemento no activa una alerta. ¿Alguien podría ayudarme a descubrir por qué todos los elementos agregados, excepto el primero, se comportan correctamente, pero el primero no? ¿Y por qué el primer elemento siempre se coloca en la parte inferior? Gracias