jQuery - вставленные теги привязки некорректно переносятся
У меня есть следующий фрагмент jQuery:
$(elementId).prevAll().appendTo(prevDiv);
Это работает, но проблема в том, что все элементы, выбранные функцией prevAll(), добавляются в div prevDiv без пробелов между ними. Это означает, что содержимое этого div (коллекция тегов привязки) не переносится на несколько строк.
Как добавить пробелы после каждого элемента коллекции или принудительного переноса для каждого элемента?
РЕДАКТИРОВАТЬ: В соответствии с просьбой, вот некоторые HTML, который демонстрирует проблему:
<div style="width:200px; overflow:hidden; border:2px"><a style="padding:5px;" href="http://www.domain.com/" id="p-1">1</a><a style="padding:5px;" href="http://www.domain.com/" id="p-2">2</a><a style="padding:5px;" href="http://www.domain.com/" id="p-3">3</a><a style="padding:5px;" href="http://www.domain.com/" id="p-4">4</a><a style="padding:5px;" href="http://www.domain.com/" id="p-5">5</a><a style="padding:5px;" href="http://www.domain.com/" id="p-6">6</a><a style="padding:5px;" href="http://www.domain.com/" id="p-7">7</a><a style="padding:5px;" href="http://www.domain.com/" id="p-8">8</a><a style="padding:5px;" href="http://www.domain.com/" id="p-9">9</a><a style="padding:5px;" href="http://www.domain.com/" id="p-10">10</a><a style="padding:5px;" href="http://www.domain.com/" id="p-11">11</a><a style="padding:5px;" href="http://www.domain.com/" id="p-12">12</a><a style="padding:5px;" href="http://www.domain.com/" id="p-13">13</a><a style="padding:5px;" href="http://www.domain.com/" id="p-14">14</a><a style="padding:5px;" href="http://www.domain.com/" id="p-15">15</a><a style="padding:5px;" href="http://www.domain.com/" id="p-16">16</a><a style="padding:5px;" href="http://www.domain.com/" id="p-17">17</a><a style="padding:5px;" href="http://www.domain.com/" id="p-18">18</a></div>
3 ответа
Я бы изменил их все на элементы блочного уровня.
$(elementId).prevAll().css( { display: 'block' } ).appendTo(prevDiv);
или если вам действительно нужно добавить текст.
$(elementId).prevAll()
.appendTo(prevDiv)
.after( " " );
Решение @tvanfosson отлично, но если вы хотите разделить поведение и представление, добавьте его в свой CSS:
#div_you_are_inserting_to a { display: block; }
Это выбор предпочтений, лично мне не очень нравится добавлять правила CSS в мой код jQuery.
$(elementId).prevAll().addClass('myDisplayBlockClass').appendTo(prevDiv);