web-dev-qa-db-fra.com

Ajouter des sauts de ligne ou des espaces entre les éléments lors de l'utilisation de jQuery .append ()

J'ai un ensemble d'éléments jQuery que je reçois de mon DOM en appelant:

$(".some-selector");

Tous mes éléments sont des DIV chacun dans sa propre ligne. Mes DIV sont définies en CSS (entre autres)

display: inline-block;

ce qui les empêche de se transformer en éléments de bloc (chacun dans sa propre ligne).

Le problème est que lorsque ces DIV sont rendus, ils sont séparés par des espaces car il y a un saut de ligne dans le document entre chaque élément. Je suis à l'aise avec ça. Je pourrais bien sûr utiliser float:left pour supprimer ces espaces, mais ce n'est pas ce que je veux car j'aurais d'autres problèmes avec le dimensionnement des conteneurs, etc.

Alors. Le problème est que je manipule l’ordre de ces éléments dans mon ensemble jQuery puis les restitue. Ce que je fais essentiellement est:

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

Le problème est qu'ils sont réinsérés dans le DOM, mais sans sauts de ligne ni espaces ...

Comment puis-je obtenir ces retours à la ligne lors de l'ajout de mes éléments dans DOM?

jqueryappendline-breaksdom-manipulationcss
23
Robert Koritnik

Après avoir réinséré vos éléments, ajoutez des espaces à chacun d’eux en utilisant .after() :

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

http://jsfiddle.net/z5cFw/

41
gilly3

Vous pouvez utiliser map pour mettre un TextNode à un seul espace après chaque DIV:

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

Démo en direct: http://jsfiddle.net/Hnv2T/

6
Šime Vidas

Le code de Šime a une mise en garde: il ajoute également un espace après le dernier élément.

Voici une version qui évite cet espace:

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

Démo en direct: http://jsfiddle.net/tqx19m3L/

0
Gras Double