change - jquery append first

Agregue saltos de línea o espacios entre elementos cuando use jQuery.append()

Question

Tengo un conjunto de elementos jQuery que recibo de mi DOM al llamar:

$(".some-selector");

Todos mis elementos son DIVs cada uno en su propia línea. Mis DIVs están configurados en CSS (entre otras cosas)

display: inline-block;

lo que evita que se representen como elementos de bloque (cada uno en su propia línea).

El problema es que cuando estos DIV se representan tienen espacios entre ellos porque hay un salto de línea en el documento entre cada elemento. Estoy cómodo con eso. Por supuesto, podría usar float:left eso eliminaría estos espacios, pero eso no es lo que quiero porque tendría otros problemas con el tamaño del contenedor, etc.

Asi que. El problema es que manipulo el orden de estos elementos en mi jQuery y luego los reenvío. Lo que esencialmente hago es:

$(".some-selector").detach().manipulate().appendTo(".container");
// or equivalent
$(".container").append($(".some-selector").detach().manipulate());

El problema es que se vuelven a insertar en el DOM, pero sin saltos de línea ni espacios ...

¿Cómo puedo obtener estos saltos de línea cuando agregué mis elementos a DOM?

Answer 1

Después de volver a insertar sus elementos, agregue algunos espacios en blanco a cada uno de ellos usando .after() :

$(".some-selector").after(" ");

http://jsfiddle.net/z5cFw/

Answer 2

El código de Šime tiene una advertencia: también agrega un espacio después del último elemento.

Aquí hay una versión que evita ese espacio:

$(''.some-selector'').detach().manipulate().map(function (index, element) {
    return index === 0 ? element : [document.createTextNode('' ''), element];
}).appendTo(''.container'');

Demostración en vivo: http://jsfiddle.net/tqx19m3L/

Answer 3

Podría usar map para poner un TextNode de un solo espacio después de cada DIV:

$(''.some-selector'').detach().manipulate().map(function() {
    return [this, document.createTextNode('' '')];
}).appendTo(''.container'');

Demostración en vivo: http://jsfiddle.net/Hnv2T/