web-dev-qa-db-ja.com

jQuery .append（）を使用するときに要素間に改行またはスペースを追加する

私はDOMを次のように呼び出すことで取得する要素のjQueryセットを持っています：

$(".some-selector");

私のすべての要素は、それぞれ独自の行にあるDIVです。私のDIVにはCSSが設定されています（特に）

display: inline-block;

これにより、ブロック要素としてレンダリングされなくなります（それぞれが独自の行にあります）。

問題は、各要素間のドキュメントに改行があるため、これらのDIVがレンダリングされるときに、それらの間にスペースがあることです。私はそれで快適です。もちろん、これらのスペースを取り除くfloat:leftを使用することもできますが、コンテナーのサイズ変更などの他の問題が発生するため、これは私が望んでいることではありません。

そう。問題は、jQueryセットでこれらの要素の順序を操作してから、それらを再レンダリングすることです。私が本質的にしていることは：

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

問題は、DOMに再挿入されることですが、改行やスペースはありません...

要素をDOMに追加するときに、これらの改行を元に戻すにはどうすればよいですか？

jqueryappendline-breaksdom-manipulationcss
23
Robert Koritnik

要素を再挿入した後、 .after() を使用して、各要素に空白を追加します。

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

http://jsfiddle.net/z5cFw/

41
gilly3

mapを使用して、各DIVの後に単一スペースのTextNodeを配置できます。

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

ライブデモ：http://jsfiddle.net/Hnv2T/

6
Šime Vidas

Šimeのコードには注意点があります。最後の要素の後にスペースも追加されます。

そのスペースを回避するバージョンは次のとおりです。

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

ライブデモ：http://jsfiddle.net/tqx19m3L/

0
Gras Double