Estoy haciendo una pagina en la que se cargan artículos desde la base de datos y se muestren en la web, Para obtener el nuevo total de filas que tiene mi base de datos uso ajax y php en el archivo php solo me regresa el numero total de filas y una vez que se verifica que el numero regresado por php no es null o 0 se ejecuta otro php mediante ajax el cual va obteniendo la fila correspondiente a la fila que quiero obtener después creo un array con el resultado y comienzo la construcción de los div o tarjetas en las que se pondrá la información, el problema es que no se crean en orden es decir no llevar el orden de Div1 Div2 Div3 si no que es aleatorio puede ser Div3 Div1 Div2 etc. La verdad es que no entiendo porque hace esto si debería de crearlos conforme a la variable i lo cual las dejaría en el orden correcto espero me puedan ayudar a resolver este problema. Ejemplo de mi código
if(response != 0){
FirstPostList = document.getElementById('PostPanelArticle0');
if(!FirstPostList){
PostCount = response;
for(let i = 1; i <= PostCount; i++){
let RowToSearchNumber = i;
DivMainToPut = document.getElementById('IdContainerArticlesLoaded');
DivImageToPut = document.getElementById('IdPostImage' + i);
DivInfoToPut = document.getElementById('IdPostInfo' + i);
$.ajax(
{
url: './php/AppGetArticleInfoPosition.php',
method: 'POST',
data: {
RowToSearch: RowToSearchNumber
},
success: function(response){
ResponseFS = response;
let Array = JSON.parse("[" + ResponseFS + "]");
let PostPhotoURL = Array[0];
let PostTitle = Array[1];
let PostResume = Array[2];
let PostViews = Array[3];
console.log(PostTitle);
console.log(PostResume);
console.log(PostViews);
const $DivPost = document.createElement('div'),
$DivImagePost = document.createElement('div'),
$ImageDivImagePost = document.createElement('img'),
$DivInfoPost = document.createElement('div'),
$DivTitlePost = document.createElement('p'),
$DivResumePost = document.createElement('p'),
$DivStadisticPost = document.createElement('div'),
$DivStadisticPostShare = document.createElement('p'),
$DivStadisticPostLike = document.createElement('p'),
$DivStadisticPostView = document.createElement('p'),
$DivStadisticPostDelete = document.createElement('p');
$DivPost.setAttribute("class", "PostArticleStudioPanel");
$DivPost.setAttribute("id", "IdPostArticleStudioPanel" + i);
$DivImagePost.setAttribute("class", "PostImage");
$DivImagePost.setAttribute("id", "IdPostArticleStudioPanel" + i);
$ImageDivImagePost.setAttribute("src", PostPhotoURL);
$DivInfoPost.setAttribute("class", "PostInfo");
$DivTitlePost.setAttribute("id", "PostTitle");
$DivTitlePost.innerText = PostTitle;
$DivResumePost.setAttribute("id", "PostResume");
$DivResumePost.innerText = PostResume;
$DivStadisticPost.setAttribute("class", "PostStadistic");
$DivStadisticPostShare.setAttribute("id", "IdCompartir");
$DivStadisticPostShare.innerText = "Compartir";
$DivStadisticPostLike.setAttribute("id", "Idlikes");
$DivStadisticPostLike.innerText = "35" + " Likes";
$DivStadisticPostView.setAttribute("id", "IdViews");
$DivStadisticPostView.innerText = PostViews + " Vistas";
$DivStadisticPostDelete.setAttribute("id", "IdDelte");
$DivStadisticPostDelete.innerText = "Eliminar";
$DivImagePost.appendChild($ImageDivImagePost);
$DivPost.appendChild($DivImagePost);
$DivPost.appendChild($DivInfoPost);
$DivPost.appendChild($DivInfoPost);
$DivPost.appendChild($DivStadisticPost);
$DivInfoPost.appendChild($DivTitlePost);
$DivInfoPost.appendChild($DivResumePost);
$DivPost.appendChild($DivStadisticPost);
$DivStadisticPost.appendChild($DivStadisticPostShare);
$DivStadisticPost.appendChild($DivStadisticPostLike);
$DivStadisticPost.appendChild($DivStadisticPostView);
$DivStadisticPost.appendChild($DivStadisticPostDelete);
DivMainToPut.appendChild($DivPost);
},
dataType: 'text'
}
);
}
}
}