Tengo un montón de números en una matriz y también tengo la misma cantidad de div. Ahora necesito el primer valor de la matriz para dar el primer div y así sucesivamente.
var xList = [265, 152, 364] var yList = [125, 452, 215]Y cada div tiene el mismo nombre de clase
function creatContent(e) { var divMark = document.createElement("div"); divMark.classList = `markers mark`; var img = $('<img class="comment" src="indeksiraj-1.png" alt="myimage" />'); $(divMark).append(img); }Cómo dar el primer valor al primer div segundo al segundo div y así sucesivamente.
Y estaba pensando en usar css como este.
$(".markers").css({ top: yList + "px", left: xList + "px" });En primer lugar, parece que está mezclando JS sin formato con JQuery. Se recomienda que evite JQuery en estos días, ya que los métodos JS sin procesar son igual de simples, pero significativamente más rápidos, y se han podido usar durante los últimos 4 años, es decir, en todos los navegadores que aún son compatibles con sus fabricantes. Por lo tanto, cambié todos los bits de JQuery de su pregunta con bits de JS sin procesar en mi respuesta.
Ahora, la forma correcta de hacer lo que pides es hacerlo dentro de tu función. Por ejemplo:
function createContent(xPos, yPos) { var divMark = document.createElement('div'); divMark.classList = 'markers mark'; divMark.style.top = yPos + 'px'; divMark.style.left = xPos + 'px'; var img = document.createElement('img'); img.classList = 'comment'; img.src = 'indeksiraj-1.png'; img.alt = 'myimage'; divMark.appendChild(img); }Luego, deberá recorrer las matrices para llamar a la función.
for (var i = 0; i < xList.length && i < yList.length; i++) { createContent(xList[i], yList[i]); }Como consideración, podría usar una sola matriz para xList e yList, lo que le permitiría cambiar su ciclo a algo más legible
var posList = [ {x: 265, y: 125}, {x: 152, y: 452}, {x: 364, y: 215}, ]; posList.forEach(({x, y}) => { createContent(x, y); }); Habiendo visto ahora más contexto a través de su violín, puedo ver que la función createContent se llama desde un clic de botón y hace mucho más de lo que ha incluido. Mantuve mi cambio para eliminar el bit JQuery de su fragmento y puse un marcador de posición para que usted coloque el resto de la funcionalidad en la función createContent .
function createContent(e) { var divMark = document.createElement('div'); divMark.classList = 'markers mark'; var img = document.createElement('img'); img.classList = 'comment'; img.src = 'indeksiraj-1.png'; img.alt = 'myimage'; divMark.appendChild(img); // ...put the rest of the code in the funtion here return divMark; } for (var i = 0; i < xList.length && i < yList.length; i++) { var mark = createContent(); mark.style.top = yList[i] + 'px'; mark.style.left = xList[i] + 'px'; }