Fügen Sie Zeilenumbrüche oder Leerzeichen zwischen Elementen hinzu, wenn Sie jQuery .append() verwenden

Ich habe einen jQuery-Satz von Elementen, die ich von meinem DOM erhalte, indem ich aufrufe:

$(".some-selector");

Alle meine Elemente sind DIVs in jeweils einer eigenen Zeile. Meine DIVs sind gesetztes CSS (unter anderem)

display: inline-block;

wodurch verhindert wird, dass sie als Blockelemente (jedes in einer eigenen Zeile) gerendert werden.

Das Problem besteht darin, dass beim Rendern dieser DIVs Leerzeichen dazwischen stehen, da im Dokument zwischen den einzelnen Elementen ein Zeilenumbruch vorhanden ist. Damit fühle ich mich wohl. könnte ich natürlich gebrauchen float:left das würde diese Leerzeichen beseitigen, aber das ist nicht das, was ich will, weil ich andere Probleme mit der Containergröße usw.

So. Das Problem ist, dass ich die Reihenfolge dieser Elemente in meinem jQuery-Set bearbeite und sie dann neu rendere. Was ich im Wesentlichen mache, ist:

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

Das Problem ist, dass sie wieder in das DOM eingefügt werden, aber ohne Zeilenumbrüche oder Leerzeichen …

Wie bekomme ich diese Zeilenumbrüche wieder hinein, wenn ich meine Elemente in DOM anfüge?

Nachdem Sie Ihre Elemente erneut eingefügt haben, fügen Sie mit etwas Leerzeichen an jedes von ihnen an .after():

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

http://jsfiddle.net/z5cFw/

Du könntest benutzen map um nach jedem DIV einen TextNode mit einem Leerzeichen einzufügen:

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

Live-Demo: http://jsfiddle.net/Hnv2T/

Der Code von Šime hat eine Einschränkung: Er fügt auch ein Leerzeichen nach dem letzten Element hinzu.

Hier ist eine Version, die dieses Leerzeichen vermeidet:

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

Live-Demo: http://jsfiddle.net/tqx19m3L/