简体   繁体   English

jQuery - 插入的锚标签无法正确包装

[英]jQuery - inserted anchor tags do not wrap correctly

I have the following snippet of jQuery: 我有以下jQuery片段:

$(elementId).prevAll().appendTo(prevDiv);

It works but the problem is that all the elements selected by the prevAll() function are appended to the prevDiv div without spaces between them. 它的工作原理但问题是prevAll()函数选择的所有元素都被附加到prevDiv div而它们之间没有空格。 This means that the content of this div (a collection of anchor tags) does not wrap onto multiple lines. 这意味着此div的内容(锚标记的集合)不会包装到多行。

How would I add spaces after each collection item or force wrap for each element? 如何在每个元素的每个集合项或强制换行后添加空格?

EDIT: As requested, here's some HTML that demonstrates the problem: 编辑:根据要求,这里有一些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>

I would change them all to be block level elements. 我会将它们全部更改为块级元素。

$(elementId).prevAll().css( { display: 'block' } ).appendTo(prevDiv);

or if you really need to append some text. 或者如果你真的需要附加一些文字。

$(elementId).prevAll()
            .appendTo(prevDiv)
            .after( " " );

@tvanfosson's solution is great, but if you want to separate behaviour and presentation, add it to your CSS: @ tvanfosson的解决方案很棒,但是如果你想分离行为和演示文稿,请将它添加到你的CSS中:

#div_you_are_inserting_to a { display: block; }

This is a choice of preference, personally I don't really like adding CSS rules to my jQuery code. 这是首选项的选择,我个人并不喜欢在我的jQuery代码中添加CSS规则。

$(elementId).prevAll().addClass('myDisplayBlockClass').appendTo(prevDiv);

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM