[Pregunta]: ¿Cómo evito esto al usar .prepend() en jQuery?

[Leguim]

Cuando uso .prepend(); para agregar un fragmento de HTML lo que pasa es que me modifica las posiciones del elemento.

Es decir:

HTML

Código (html) [Seleccionar] Expandir


<div id="elementos"></div>


javascript/JQUERY

Código (javascript) [Seleccionar] Expandir


$('#elementos').prepend('<div class="elemento">ELEMENTO 1</div>'); // esperaría que esto tuviera la posición 0

$('#elementos').prepend('<div class="elemento">ELEMENTO 2</div>'); // esperaría que esto tuviera la posición 1

$('#elementos').prepend('<div class="elemento">ELEMENTO 3</div>'); // esperaría que esto tuviera la posición 2


Pero si accedo a los elementos ocurre que va desde el 0 hasta el 2 y no desde el 2 hasta el 0, entonces no hay manera de evitar que vaya agregando estas posiciones de menor a mayor y sí de mayor a menor?

Código (javascript) [Seleccionar] Expandir


document.querySelectorAll('.elemento')[0].style.opacity = 0.5; // esperaría que modifique al ELEMENTO 1 pero modificará al ELEMENTO 3


[engel lex]

estás usando la función equivocada, prepend es "pre append" es decir insertar antes, esto lo que hace es que cada ver que insertas algo, lo inserta en la cabeza en lugar de la cola, ej.:

Código [Seleccionar] Expandir

lista = []
prepend(1)
prepend(2)
prepend(3)

lista -> [3,2,1]

tu buscas es la función append que es simplemente "insertar" y por defecto inserta al final, ej.:

Código [Seleccionar] Expandir

lista = []
apend(1)
apend(2)
apend(3)

lista -> [1,2,3]


me parece curioso que te hayas en programación dado primero con prepend que append, más bien usualmente la duda es "como uso append para agregar al inicio?"

[MinusFour]

Lo más sencillo sería que solo cambiarás el orden de las instrucciones pero puedes agregar todos los elementos en una sola instrucción:

Código (javascript) [Seleccionar] Expandir


$('#elementos').prepend([
   '<div class="elemento">ELEMENTO 1</div>',
   '<div class="elemento">ELEMENTO 2</div>',
   '<div class="elemento">ELEMENTO 3</div>'
]);

Si #elementos está vacio también puedes usar .append.

[Leguim]

Ya lo solucioné!

xD (( necesitaba usar prepend y no append por un tema de como se ve visualmente, quiero que inicie arriba pero no quería que me "rompiera" las posiciones que estaba usando.

Lo conseguí con esta formula por si las dudas a alguien le sirva:

Código (javascript) [Seleccionar] Expandir


let Q = document.querySelectorAll('.elemento').length;
let X = 1; // posición que se quiere usar
X = Q - X - 1;


Gracias!

[engel lex]

claro tu problema es que querías que organize visualmente de una manera y en JS inversa, tambien pudiste invertirlo con una regla de css ya que el es quien se encarga de lo visual

ejemplo

Código [Seleccionar] Expandir

    display: flex;

    /* según el caso  */
    /* 1: */
    flex-direction: row-reverse;

    /* 2: */
    flex-direction: column-reverse;


[Leguim]

claro tu problema es que querías que organize visualmente de una manera y en JS inversa, tambien pudiste invertirlo con una regla de css ya que el es quien se encarga de lo visual

ejemplo

Código [Seleccionar] Expandir

    display: flex;

    /* según el caso  */
    /* 1: */
    flex-direction: row-reverse;

    /* 2: */
    flex-direction: column-reverse;


También esa es buena!
No la conocía.