使用.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) - 在這一行中，您嘗試設置每個UL的'obj'數據，但是您使用的是'html'變量，它是UL的集合。如果你只有一個UL，它會工作，但隨着循環的進行，HTML變量將包含多個UL，並且jQuery不知道你想要設置'obj'數據的元素。

所以，現在，爲了簡化，我改變了這兩行

1. var ul= $("<ul>"+"<li>"+val.name+"</li>"+"</ul>"); - 在這條線，變「UL」將保存當前上行的迴路形成。以便我們可以單獨在下一行中使用它。
2. ul.data('obj',val.data); - 這裏我們將爲當前創建的UL設置數據'obj'。就這樣吧
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>