0

こんな構造をしています。

<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 を追加する方法はどれですか?

4

2 に答える 2

3

ノート

あなたの 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 に頭がおかしくなります。以下のコメントは、いくつかの手がかりを与えることができます。

于 2012-06-24T15:50:55.210 に答える
1

Pタグは有効な子ではないULため、html は無効です

スタイルの目的で別のクラスを指定Pできます LI

最後の前に挿入する必要がありますLI

   $('ul.gallerylist li:last').before('<li><img .../><br/><input .../></li>');
于 2012-06-24T15:56:53.477 に答える