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

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添加到ul中的方式是正确的吗？

Answer 1

注意

我认为您的HTML标记无效，无法像p那样将ul置于{I}之内。最好将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>');

<强> DEMO

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

或

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

<强> DEMO

阅读jQuery .insertBefore()

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

Answer 2

P代码不是UL的有效子代，因此您的HTML无效

您需要将P更改为LI您可以为其设置不同的课程

现在您需要在最后LI

之前插入

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