使用jQuery时,在元素之间添加换行符或空格.append()

Rob*_*nik 23 css jquery append line-breaks dom-manipulation

我有一个jQuery元素集,我通过调用从DOM获得:

$(".some-selector");
Run Code Online (Sandbox Code Playgroud)

我的所有元素都是各自的DIV.我的DIV设置CSS(除其他外)

display: inline-block;
Run Code Online (Sandbox Code Playgroud)

这会阻止它们作为块元素呈现(每个元素都在它自己的行中).

问题是,当渲染这些DIV时,它们之间会有空格,因为每个元素之间的文档中都有换行符.我很满意.我当然可以使用float:left它来摆脱这些空间,但这不是我想要的,因为我会有容器大小等其他问题.

所以.问题是我在jQuery set中操纵这些元素的顺序然后重新渲染它们.我基本上做的是:

$(".some-selector").detach().manipulate().appendTo(".container");
// or equivalent
$(".container").append($(".some-selector").detach().manipulate());
Run Code Online (Sandbox Code Playgroud)

问题是它们被重新插入DOM,但没有换行符或空格......

在将元素追加到DOM中时,如何获得这些换行符?

gil*_*ly3 41

重新插入元素后,使用.after()以下内容为每个元素添加一些空格:

$(".some-selector").after(" ");
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/z5cFw/

  • @Šime:它有效,但他的例子是在ansewr中使用`.append()`而不是`.after()`.http://jsfiddle.net/z5cFw/ (2认同)

Šim*_*das 6

您可以使用map在每个DIV之后放置单空间TextNode:

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

现场演示: http ://jsfiddle.net/Hnv2T/