Estoy dentro de un ciclo que me devuelve un ajax. Osea estoy en el .DONE del ajax.
El ciclo funciona bien. quiero aprovechar el ciclo y agregar varios div, dentro de otro div de mi html. en cada div yo agrego una foto. pero aparentemente me esta sobreescribiendo todos los divs, ya que cuando ejecuto, me muestra la ultima foto.
no se si .append() me agrega un div, en el primer ciclo, y para los siguientes este me los sobreescribe. Si es asi no sabria como controlarlo.
HTML:
<div class="carousel-inner" id="fotos">
// aqui los otros divs dinamicos
</div>
aqui en JS, desde el .done del ajax.
let contador=1;
$.each(JSON.parse(data), function (i, item) {
let nombre = 'imagen' + contador;
$('#fotos').append('<div class="carousel-item active"'+
'id="fot' + contador +'"><img class="d-block w-100" src="#" width="1100"'+
'height="500" alt="First slide" id="foto'+contador+'"></div>');
if (item[nombre] != 'data:image/jpeg;base64,') {
console.log(contador);
$("#foto"+contador).attr("src", item[nombre]);
$("#fot"+contador).removeClass("d-none");
}
contador ++;
});
EDITADO============================================
He movido la parte de agregar el div a una funciona externa, y me he dado cuenta que los (" ") de las class que le paso a mi div daña todo, entonces no sabria como hacer todo eso de los estylos sin que se dañe mi codigo.
contador = 1;
$.each(JSON.parse(data), function (i, item) {
adddiv(contador);
contador ++;
});
La funcion externa:
function adddiv($contador){
// NO FUNCIONA
var divTmp = '<div class='+'"'+'carousel-item'+'"'+' > hola</div>'; // NO FUNCIONA
// NO FUNCIONA
var divTmp = '<div class="carousel-item"> hola</div>'; // NO FUNCIONA
//SI FUNCIONA
var divTmp = '<div> hola</div>'; // FUNCIONA
document.getElementById("fotosCarrusel").insertAdjacentHTML("afterend",divTmp);
}
EDITADO 2::::::::::::
var divTmp = '<div id="fot' + $contador +' "> <img src="#" width="1100" height="500" \n\
alt="First slide" id="foto'+$contador+'"> </div>';
He comprobador que mi div en el CLASS="" funciona, cuando le agrego CLASS se daña, le puedo agregar el id, el alt le puedo puedo width, etc, a mis divs, pero cuando le pongo el class="" a mi etiqueta div se daña.