2011-08-01 9 views
23

Mam zestaw jQuery elementów, które dostaję od moich DOM pod numerem:przerwy dodawania linii lub przestrzenie pomiędzy elementami, gdy przy użyciu jQuery .append()

$(".some-selector"); 

Wszystkie moje elementy DIV, każdy w oddzielnym wierszu . Moi DIV są ustawione CSS (między innymi)

display: inline-block; 

co uniemożliwia im renderowania jako elementy blokowe (każdy w oddzielnym wierszu).

Problem polega na tym, że gdy te DIV są renderowane, mają spacje między nimi, ponieważ pomiędzy poszczególnymi elementami występuje podział wiersza w dokumencie. Czuję się z tym dobrze. Mógłbym oczywiście użyć float:left, który pozbyłby się tych spacji, ale to nie jest to, co chcę, ponieważ mam inne problemy z wielkością pojemnika itp.

Tak. Problem polega na tym, że manipuluję kolejnością tych elementów w moim zestawie jQuery, a następnie ponownie je zgłaszam. Co mogę zrobić, to przede wszystkim:

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

Problemem jest to, że się ponownie włożony do DOM, ale bez przerwy linii lub spacjami ...

Jak mogę dostać te podziały wiersza z powrotem, gdy w dołączanie moich elementów do DOM?

Odpowiedz

40

Po ponownym wstawić elementy, dołączyć jakieś odstępy do każdego z nich za pomocą .after():

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

http://jsfiddle.net/z5cFw/

+0

To nie działa - nie ma spacji między elementami SPAN: http://jsfiddle.net/u5jBS/1/ –

+2

@ Šime: Działa, ale jego przykład używa '.append()' zamiast '.after()' jak w ansewr. http://jsfiddle.net/z5cFw/ – user113716

+0

@patrick Cool ':)' –

6

Można użyć map umieścić TextNode pojedynczej spacji po każdym DIV:

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

żywo demo:http://jsfiddle.net/Hnv2T/

+2

+1 za czynnik geek-cool. – user113716

+0

To naprawdę sprytny Šime. +1 ode mnie również. –

Powiązane problemy