如果没有包装，我怎么能用div容器包装元素？

Question

我尝试用div容器包装以下元素，如果它没有结束。

<p class="fileDetails"><div class="filename">text goes here</div><div class="fileSize">text goes here</div></p>

如何解决这个问题？

Answer 1

您无法将<div>个元素放在<p>内。 （如果您有兴趣，请参见规范 - 另见Putting <div> inside <p> is adding an extra <p>）。

所以你必须切换到你想要的样式的<span>，或者在语义上可能是无序列表更有意义。

Here's a fiddle展示它是如何运作的。

Answer 2

工作示例：http://jsfiddle.net/ef43tgto/

您应该生成.filename和.fileSize <p>标记，并将.fileDetails设为<div>。然后你可以使用jQuery .wrap（）

<div class="fileDetails">
    <p class="filename">text goes here</p>
    <p class="fileSize">text goes here</p>
</div>

if ( !$('.container').length ) {
    $('.fileDetails').wrap('<div class="container" />')
}