jquery - 将一些元素添加到列表中但在段落之前

Question

我有这样的结构。

<ul class="gallerylist">
<li>
    <image ...>
    <input ...>
</li>
<li>
    <image ...>
    <input ...>
</li>
<li>
    <image ...>
    <input ...>
</li>
<p style="clear:both;">&nbsp;</p>
</ul>

由于视觉校正，我必须使用<p style="clear:both;">&nbsp;</p>部分，并且我正在通过 JQuery 动态添加新的列表项：

$('ul.gallerylist').append('<li><img .../><br/><input .../></li>');

但正如您可以猜到的那样，它被附加在<p style="clear:both;">&nbsp;</p>零件之后，它会破坏视觉校正。

我的问题是：p在 ul 中添加 li 作为最后但在标签之前的哪种方式是正确的？

Answer 1

笔记

我认为您的 HTML 标记无效，不能像您所做的那样放置p在其中。ul最好将其包装p在另一个中li并用于CSS完成您的工作。

例如：

HTML

<ul class="gallerylist">
    <li>
        <img src="">
        <input type="text">
    </li>
    <li>
        <img src="">
        <input type="text">
    </li>
    <li>
        <img src="">
        <input type="text">
    </li>
    <!-- wrap within li and assign a class to that li-->
    <li class="makeclear">
            <p>&nbsp;</p>
    </li>
</ul>

CSS

/* apply css to that li*/
.makeclear{
    clear:both;
}

jQuery

$('ul.gallerylist li.makeclear')
         .before('<li><img src=""/><br/><input type="text"/></li>');

演示

阅读.before()，它将通过选择器在匹配元素之前插入一个元素。

或者

$('<li><img src=""/><br/><input type="text"/></li>')
                   .insertBefore('ul.gallerylist li.makeclear');

演示

阅读 jQuery .insertBefore()

但是，有效的标记是必要的，否则 IE 会让你发疯。下面的评论可以给你一些线索。

Answer 2

P标签不是一个有效的孩子，UL所以你的 html 是无效的

您需要将您的更改 P为LI您可以出于样式目的给它一个不同的类

现在您将需要在 last 之前插入LI

   $('ul.gallerylist li:last').before('<li><img .../><br/><input .../></li>');