jquery - LI の ID を使用して現在の UL にデータを追加

Question

私はhtmlに次の構造を持っています（質問を投稿する際のフォーマットの問題のため、ulとliの前に最初のタグを書いていません）

<ul>
    <li id="list0">xyz
        <ul>
            <li id="list1">abc</li>
            <li id="list2">abc</li>
            <li id="list3">abc</li>
        </ul>
    </li>
</ul>

ここで、id を list2 として関数にのみ渡すことができ、その関数がいくつかの ajax 処理を行い、応答 li id="list4">abc を返すとします。

ID「list2」のliを持つulに、この新しく追加された子を追加したいと思います。私が従おうとしたが失敗したセレクターは何ですか

function selectUl(id){
   $("#list"+id+"").parent().append('li id="list4">abc</li');  //inserts new list in parent ul 
   $("#list"+id+"").append('li id="list4">abc</li'); //inserts new list after current ul
   $('li id="list4">abc</li').insertAfter("#list"+id+""); //inserts new list after current ul
}

現在の ul に新しいリストを挿入したいのですが、その ul 内のリストの ID のみを渡すことができるという条件で、これを行うように教えてください。

Answer 1

  $('#list2').after('<li>foo</li>');

またはあなたのシナリオのように：

function selectUl(id){
   $("#list"+id+"").after('<li id="list4">abc</li>');
}

jsFiddleの例

Answer 2

ここで何を達成したいのか、少しわかりません。

ajax 応答が返され、その ajax 応答に ID が含まれていますか? それとも、追加したい実際の HTML がありますか?

ID「list3」の現在の LI の後にのみ新しい LI を追加しますか? それとも、新しい「外部」LI を追加して、新しい UL リストを作成しますか?

アップデート：

「insertAfter」を使用する必要はありません。UL に追加するだけで済みます。このような：

var list = document.getElementById("list0").getElementsByTagName("UL")[0]; // Chooses the first UL contained in the list0 LI
var newLI = document.createElement("LI");
newLI.id = "list4";
newLI.innerHTML = "abc";
list.appendChild(newLI);

したがって、引数付きの ID をこのコードの適切な場所に配置してください。それが役立つことを願っています:-)

Answer 3

$('<li id="list2">def</li>').insertAfter($(document).find("ul #list2"));