使用.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"]}
                }
]


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


$(function(){	
$('ul').click(function(){
	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) - 在这一行中，您正试图设置＆＃39; obj＆＃39;每个UL的数据，但您正在使用＆＃39; html＆＃39;变量，它是UL的集合。如果您只有一个UL，它将起作用，但随着循环的进行，HTML变量将包含多个UL，并且jQuery不知道您要设置哪个元素＆＃39; obj＆＃39;数据

现在，为了简化，我将这两行更改为

1. var ul= $("<ul>"+"<li>"+val.name+"</li>"+"</ul>"); - 在这一行中，变量＆＃39; ul＆＃39;将存储在循环中创建的当前UL。这样我们就可以在下一行单独使用它。
2. ul.data('obj',val.data); - 这里我们将设置数据＆＃39; obj＆＃39;对于当前创建的UL。那就是
3. $('#check').append(ul); - 现在，在创建UL并设置其对象后立即进行数据，我们将在页面中添加它。

轻微改变：

来自

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);

        });

＆＃13;
＆＃13;
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"]}
                }
]


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


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

})
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="check"></div>
＆＃13;
＆＃13;
＆＃13;