3

ajax呼び出しによって取得されたデータセットがあります。データセットをループして、セット内の各アイテム<li>について、ページにあるリストにを追加します。

各ループに追加されたリストアイテムを取得して、その上で個別のアクションを実行できるようにするにはどうすればよいですか？

var myData = getData();
var list = $('#list');
$.each(myData, function(index, person){
    list.append('<li>'+person.name+'</li>');
    // On the just appended <li> element I want to set the data-person attribute

    //var listitem = ???;
    //listitem.data('person', person);
});

これが私の問題を説明するためのフィドルです：http：//jsfiddle.net/pcLt7/1/

4

4 に答える 4

14

生のHTMLからjQueryオブジェクトを作成し、それを追加するだけです

var listitem = $('<li>'+person.name+'</li>');
list.append(listitem);
listitem.data('person', person);

注：ループ内でDOM操作を行うことはお勧めできません。

要素の数が少ない場合は、私のソリューションを使用してください。これが数百の要素である可能性がある場合は、アイテムを追加する前にリストでデタッチを使用し、後でそれをDOMに再度追加することにより、デタッチされたノードで作業することをお勧めします。

時期尚早に最適化しないでください。このソリューションは、使用するコードが少なく、他のどのソリューションよりも読みやすく、問題なく機能します。

于 2012-10-01T14:42:18.383 に答える
2

これを試して

Prinzhornの提案に基づく（リンク）：

注：ループ内でDOM操作を行うことはお勧めできません

コードを変更しました。現在、「li」を1つの文字列に連結してから、それらすべてをリストに追加しています。

 var list = $('#list');
var str = "";
$.each(myData, function(index, person){
    str += "<li data-person='" + JSON.stringify(person) + "'>"
    + person.name + "</li>";

    // On the just appended <li> element I want to set the data-person attribute

    //var listitem = ???;
    //listitem.data('person', person);
});

list.append(str);

http://jsfiddle.net/pcLt7/2/

于 2012-10-01T14:46:58.617 に答える
1 
$.each(myData, function(index, person){
    list.append('<li data-person="'+person.name+'"+ data-member="'+person.member+'">'+person.name+'</li>');
});

$('#list li').click(function(){
    var person = $(this).data('person');
    var member = $(this).data('member');
    alert(person + ' is ' + (member ? 'a' : 'no') + ' member');
});

http://jsfiddle.net/gV9RJ/

于 2012-10-01T14:44:45.650 に答える
1

一気に

$.each(myData, function(index, person){
    $('<li/>', {
        text: person.name,
        data: person
      }).appendTo(list);
});
于 2012-12-22T02:21:13.043 に答える