Добавление разрывов строк или пробелов между элементами при использовании jQuery.append()

У меня есть набор элементов jQuery, которые я получаю из своей DOM, вызывая:

$(".some-selector");

Все мои элементы - это DIVs в каждой строке. Мои DIVs устанавливают CSS (между прочим)

display: inline-block;

который предотвращает их рендеринг как элементов блока (каждый в своей собственной строке).

Проблема заключается в том, что когда эти DIV визуализируются, у них есть пробелы между ними, потому что в документе между каждым элементом разбивается строка. Мне это нравится. Я мог бы, конечно, использовать float:left, который избавится от этих пространств, но это не то, что я хочу, потому что у меня возникнут другие проблемы с размером контейнера и т.д.

Итак. Проблема в том, что я управляю порядком этих элементов в моем наборе jQuery, а затем повторно их выполняю. В основном я понимаю:

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

Проблема в том, что они повторно вставлены в DOM, но без разрывов строк или пробелов...

Как мне получить эти разрывы строк при добавлении моих элементов в DOM?

Ответ 1

После повторной установки ваших элементов добавьте некоторые пробелы к каждому из них, используя .after():

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

http://jsfiddle.net/z5cFw/

Ответ 2

Вы можете использовать map для размещения однострочного текстового поля после каждого DIV:

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

Live demo: http://jsfiddle.net/Hnv2T/