使用jQuery的.append()方法时，应在元素之间添加换行符或空格。

Question

我从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中时，如何让这些换行符重新出现？

- Robert Koritnik

Answer 1

在重新插入元素之后，使用.after()为每个元素添加一些空白。

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

http://jsfiddle.net/z5cFw/

- gilly3

---

那个不行 - SPAN元素之间没有空格：http://jsfiddle.net/u5jBS/1/ - Šime Vidas

@Šime：它可以工作，但他的示例使用的是.append()而不是答案中的.after()。http://jsfiddle.net/z5cFw/ - user113716

我想在jsfiddle中有bug比在发布的答案中有bug要好，对吧？ :-) 谢谢你修复jsfiddle！ - gilly3

尽管我在理解jQuery文档时犯了错误，但这段代码确实有效。文档中写道：“将一个或多个额外的DOM元素、元素数组、HTML字符串或jQuery对象插入到匹配元素集合中每个元素的末尾。”我曾以为它会在每个元素后面追加一组元素，因为我是将一组元素附加到一个元素上，而文档实际上是指将一个元素附加到一组元素上。:)谢谢大家。 - Robert Koritnik

Answer 2

你可以使用map在每个DIV后面添加一个单空格TextNode：

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

实时演示：http://jsfiddle.net/Hnv2T/

- Šime Vidas

---

这真是一个聪明的想法，Šime。我也给你点赞。 - Robert Koritnik

Answer 3

Šime的代码有一个警告：它还会在最后一个元素之后添加一个空格。

这里有一个避免这个空格的版本：

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

演示: http://jsfiddle.net/tqx19m3L/

- Gras Double