jQuery - 插入的锚标签没有正确换行答案

【问题标题】：jQuery - inserted anchor tags do not wrap correctlyjQuery - 插入的锚标签没有正确换行
【发布时间】：2011-07-30 01:18:11
【问题描述】：

我有以下 jQuery 的 sn-p：

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

它可以工作，但问题是 prevAll() 函数选择的所有元素都附加到 prevDiv div 中，它们之间没有空格。这意味着这个 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>

【问题讨论】：

给我们一个给出错误的 HTML 示例。你可以使用jsfiddle.net

标签： jquery css dom-manipulation

【解决方案1】：

我会将它们全部更改为块级元素。

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

或者如果你真的需要附加一些文本。

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

【讨论】：

@tvanson 我认为块应该用引号括起来，即 { display: 'block' }
+1 很棒的解决方案。使用 .css('display', 'block') 可能也不错，如果有人不喜欢使用简单规则的对象表示法。
@cybernate - 绝对正确，最近编辑了太多 CSS 文件。
我对显示块指令没有任何成功。是的，它将每个元素分成单独的一行，但我希望元素彼此相邻并包裹在 div 中。
@tvanfosson - 你太棒了！谢谢。

【解决方案2】：

@tvanfosson 的解决方案很棒，但是如果您想将行为和呈现分开，请将其添加到您的 CSS：

#div_you_are_inserting_to a { display: block; }

这是一个偏好选择，我个人不太喜欢在我的 jQuery 代码中添加 CSS 规则。

【讨论】：

【解决方案3】：

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

【讨论】：