1
如何创建div的数组结构我的匹配div id与其他子div的id的data-id?
var pushData = [];
$(function() {
CreateArray();
});
function CreateArray() {
//output in data:
var data = [{
"Id": 38,
"Connections": [39, 40],
"Name": "ABc"
}, {
"Id": 39,
"Connections": [40],
"Name": "pqr"
}, {
"Id": 40,
"Connections": [],
"Name": "lmn"
}];
$.each(data, function(index, value) {
$(document.createElement('div')).addClass("latestblock")
.html(value.Name)
.attr('id', value.Id)
.attr('data-id', value.Connections)
.appendTo($("#container"));
});
//Above loops generates this:
//<div id="38" class="latestblock" data-id="39,40">ABc</div>
//<div id="39" class="latestblock" data-id="40">pqr</div>
//<div id="40" class="latestblock" data-id="">lmn</div>
//Here data-id:39,40 indicated that div 39 and div 40 are connected to div 38 and so i want to create my array
//like this:
//Expected Output:
// pushData[0]:
// from: <div id="38" class="latestblock" data-id="39,40">ABc</div>
// To: <div id="39" class="latestblock" data-id="40">pqr</div>
// pushData[1]:
// from: <div id="38" class="latestblock" data-id="39,40">ABc</div>
// To: <div id="40" class="latestblock" data-id="">lmn</div>
// pushData[2]:
// from: <div id="39" class="latestblock" data-id="40">pqr</div>
// To: <div id="40" class="latestblock" data-id="">lmn</div>
//$('#container').find('div').each(function() {
// var Id = $(this).attr('id');
// var connections = $(this).attr('data-id').split(',');
// for (var i = 0; i < connections.length; i++) {
// pushData.push({
// from: userId,
// to: connections[i]
// });
// }
// console.log(pushData)
//});
//With above code i am getting output like this:
// pushData[0]:
// from:38
// To:39
// pushData[0]:
// from:38
// To:40
}
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<div id="container">
ertertert
</div>
我想通过匹配data-id
创建的div array structure
(这是逗号分隔,这data-id
不过其他child divs
ID) 与其他分区ID一起:
这是我的div:
<div id="container">
</div>
var pushData = [];
function CreateArray(){
$.getJSON('My Wcf service Url', function (data) {
//output in data:
var data=[
{
"Id": 38,
Connections":[39,40],
"Name":"ABc"
},
{
"Id": 39,
Connections":[40],
"Name":"pqr"
},
{
"Id": 40,
Connections":[],
"Name":"lmn"
}]
$.each(data, function (index, value) {
$(document.createElement('div')).addClass("latestblock")
.html(value.Name)
.attr('id', value.Id)
.attr('data-id', value.Connections)
.appendTo($("#container"));
});
//Above loops generates this:
//<div id="38" class="latestblock" data-id="39,40">ABc</div>
//<div id="39" class="latestblock" data-id="40">pqr</div>
//<div id="40" class="latestblock" data-id="">lmn</div>
//Here data-id:39,40 indicated that div 39 and div 40 are connected to div 38 and so i want to create my array
//like this:
Expected Output:
pushData[0]:
from: <div id="38" class="latestblock" data-id="39,40">ABc</div>
To: <div id="39" class="latestblock" data-id="40">pqr</div>
pushData[1]:
from: <div id="38" class="latestblock" data-id="39,40">ABc</div>
To: <div id="40" class="latestblock" data-id="">lmn</div>
pushData[2]:
from: <div id="39" class="latestblock" data-id="40">pqr</div>
To: <div id="40" class="latestblock" data-id="">lmn</div>
//$('#container').find('div').each(function() {
// var Id = $(this).attr('id');
// var connections = $(this).attr('data-id').split(',');
// for (var i = 0; i < connections.length; i++) {
// pushData.push({
// from: userId,
// to: connections[i]
// });
// }
// console.log(pushData)
//});
//With above code i am getting output like this:
pushData[0]:
from:38
To:39
pushData[0]:
from:38
To:40
});
}
预期O utput:
pushData[0]:
from: <div id="38" class="latestblock" data-id="39,40">ABc</div>
To: <div id="39" class="latestblock" data-id="40">pqr</div>
pushData[1]:
from: <div id="38" class="latestblock" data-id="39,40">ABc</div>
To: <div id="40" class="latestblock" data-id="">lmn</div>
pushData[2]:
from: <div id="39" class="latestblock" data-id="40">pqr</div>
To: <div id="40" class="latestblock" data-id="">lmn</div>
请保持您的问题声明的代码外,并展示了最低限度代码重现您的问题。当你的代码甚至不是有效的JavaScript时,很难提供帮助。你不需要匹配data-id;他们是字符串,而不是数组;直接在循环中使用你的json数据。 – Sheepy
@Sheepy:我为你创建了演示。 –