2

リスト要素を既存のリストに動的に追加しようとしています。

私はフォームにリストを持っています、

<ul id="test">
    <li class="testField">YYAAHOOOOOO<li>
</ul>

jQueryの追加または後にこのリストにアイテムを追加しようとしています...

私がしたことは： 

$(".testField").after("<li class='testField'>TEST MESSENGER</li>");

追加として使用されたafter関数は機能しませんでしたが、クラス名を持つ要素が1つしかないため、after関数は最初は正常に機能しますがtestField、リストが大きくなるにつれて、after関数は存在するすべての要素にリストアイテムを追加します。

明確にするために、最初の試行で出力を取得します。

<ul id="test">
    <li class="testField">YYAAHOOOOOO<li>
    <li class='testField'>TEST MESSENGER</li>
</ul>

たとえば<li class='testField'>GOOGLE</li>、今すぐ別の要素を追加しようとすると、出力は次のようになります。

<ul id="test">
    <li class="testField">YYAAHOOOOOO<li>
    <li class='testField'>GOOGLE</li>
    <li class='testField'>TEST MESSENGER</li>
    <li class='testField'>GOOGLE</li>
</ul>

IDを使用することを考えましたが、リストから要素を削除するオプションも設定しようとしています...したがって、未定義のIDに追加しようとすると、エラーが返されます。リスト内の最初の要素を見つけて、その最初の要素に要素を追加する方法はありますか？

4

2 に答える 2

5

試す：

$(".testField:first").after("<li class='testField'>TEST MESSENGER</li>");

これにより、最初の要素の後にのみ追加するようになります

于 2012-12-14T07:24:30.003 に答える
0

または、jQueryなしでこれを行うこともできます。

var li = document.createElement('li');                       // Create a List item.
    li.setAttribute("class", "testfield");                   // Set the li's class
    li.addChild(document.createTextNode("Your Text Here!")); // Set the li's text
document.getElementById("test").addChild(li);                // Append the li to the list

それは少しコードが多いです、はい、しかしそれはjQueryが内部で行うこととほとんど同じです。（そしてより速くも）

すでにリストにある最初の行の後に新しいulを追加する場合はli、最後の行を次のように置き換えます。

var ul = document.getElementById("test");
if(ul.children.length > 1){              // If the list has 2 or more children (li's)
    ul.insertBefore(li, ul.children[1]); // Insert the new item before the second item in the list.
}else{
    document.getElementById("test").addChild(li); 
}

さて、なぜ私はより多くのコードを必要とする答えを投稿するのですか？
jQueryで実行できることはすべて、ネイティブJSで実行できます。SOで複数の異なる回答を利用できるようにするのは良いことだと思います。特に、同じことを行うために異なる手法を使用している場合はそうです。そうすれば、ユーザーは自分で選択できます。short'neasy（jQuery）、またはライブラリを使用したくない場合はネイティブコードです。

于 2012-12-14T07:47:06.717 に答える