ассоциированный объект с элементом using .data

Question

Мне нужно связать объект с каждым ul, который создается динамически. Я использовал .data, но при попытке восстановить это дает неопределенное значение. fiddle

var file= [ 
 
       { 
 
        "name": "jhon", 
 
        "email": "manager", 
 
        "image": "images/profile-pic.png", 
 
        "data":{"name":"mile","depend":["amit","rajesh","deepak"]} 
 
       }, 
 
       { 
 
        "name": "mile", 
 
        "email": "manager", 
 
        "image": "images/profile-pic.png", 
 
        "data":{"name":"mike","depend":["amit","rajesh","deepak"]} 
 
       }, 
 
       { 
 
        "name": "steave", 
 
        "email": "manager", 
 
        "image": "images/profile-pic.png", 
 
        "data":{"name":"steave","depend":["amit","rajesh","deepak"]} 
 
       } 
 
] 
 

 

 
\t var html="" 
 
\t $.each(file,function(i,val){ 
 
\t \t html+= "<ul>"+"<li>"+val.name+"</li>"+"</ul>" 
 
\t \t $(html).data('obj',val.data) \t \t 
 
\t }) 
 
\t 
 
\t $('#check').append(html) 
 

 

 
$(function(){ \t 
 
$('ul').click(function(){ 
 
\t console.log($(this).data('obj')) 
 
}) 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="check"></div>

Answer 1

Эти строки глючат в коде

1. html+= "<ul>"+"<li>"+val.name+"</li>"+"</ul>" - Эта строка кода фактически собирает все UL (в мена) в одной переменной.

2. $(html).data('obj',val.data) - В этой строке вы пытаетесь установить данные 'obj' каждого UL, но вы используете переменную html, которая представляет собой набор UL. Он будет работать, если у вас есть только ОДИН UL, но по мере прохождения цикла переменная HTML будет содержать более одного UL, а jQuery не будет знать, для какого элемента вы хотите установить данные «obj».

Так что теперь, чтобы упростить, я изменил эти две строки

1. var ul= $("<ul>"+"<li>"+val.name+"</li>"+"</ul>"); - в этой строке, переменная «уль» будет хранить текущий UL создан в цикле. Чтобы мы могли использовать его в следующей строке индивидуально.
2. ul.data('obj',val.data); - здесь мы установим Data 'obj' для текущего созданного UL. Вот так
3. $('#check').append(ul); - Теперь, сразу после создания UL и установки его данных «obj», мы добавим его на страницу.

Незначительные изменения:

из

var html="" 
    $.each(file,function(i,val){ 
     html+= "<ul>"+"<li>"+val.name+"</li>"+"</ul>" 
     $(html).data('obj',val.data)   
    }) 

    $('#check').append(html) 

в

$.each(file,function(i,val){ 
      var ul= $("<ul>"+"<li>"+val.name+"</li>"+"</ul>"); 
      ul.data('obj',val.data); 
      $('#check').append(ul); 

     }); 

var file= [ 
 
       { 
 
        "name": "jhon", 
 
        "email": "manager", 
 
        "image": "images/profile-pic.png", 
 
        "data":{"name":"mile","depend":["amit","rajesh","deepak"]} 
 
       }, 
 
       { 
 
        "name": "mile", 
 
        "email": "manager", 
 
        "image": "images/profile-pic.png", 
 
        "data":{"name":"mike","depend":["amit","rajesh","deepak"]} 
 
       }, 
 
       { 
 
        "name": "steave", 
 
        "email": "manager", 
 
        "image": "images/profile-pic.png", 
 
        "data":{"name":"steave","depend":["amit","rajesh","deepak"]} 
 
       } 
 
] 
 

 

 
\t 
 
\t $.each(file,function(i,val){ 
 
\t \t var ul= $("<ul>"+"<li>"+val.name+"</li>"+"</ul>"); 
 
     ul.data('obj',val.data); 
 
     $('#check').append(ul); 
 
\t \t 
 
\t }); 
 
\t 
 
\t 
 

 

 
$(function(){ \t 
 
$('ul').click(function(){ 
 
\t console.log($(this).data('obj')) 
 
}) 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="check"></div>