相同的div填充数据而不是不同的div

$(function(){ var camera, renderer; var mpi=Math.PI /180; var circleRadius = 1800; var startAngle = 0; var centerX = 0; var centerZ = 0; var startRadians = startAngle + mpi; var totalSpheres = 5; var incrementAngle = 360/totalSpheres; var incrementRadians = incrementAngle * mpi; var Element = function ( id, w, h, position, rotation ) { var html = [ '
', '
', '
', '
', '
', '
', '
', '
' ].join('\n'); var div = document.createElement('div'); $(div).html(html); var object = new THREE.CSS3DObject( div ); object.position.x = position.x; object.position.y = position.y; object.position.z = position.z; object.rotation.x = rotation.x; object.rotation.y = rotation.y; object.rotation.z = rotation.z; return object; } init(); function init() { scene = new THREE.Scene(); var container = document.getElementById( 'container' ); var renderer = new THREE.CSS3DRenderer(); renderer.setSize(window.innerWidth, window.innerHeight*.85); container.appendChild( renderer.domElement ); camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10 ); camera.position.set(-100,60,4000); var group = new THREE.Group(); var str = {"0": $.ajax({ dataType: "text", url: "http://localhost/liberate/threeee/PAGES/Information/pages/content.html", success: function (data) { console.log(data); $("#id").append(data); }}), "1":$.ajax({ dataType: "text", url: "http://localhost/liberate/threeee/PAGES/Information/pages/content.html", success: function (data) { console.log(data); $("#attacker").append(data); }}), "2":$.ajax({ dataType: "text", url: "http://localhost/liberate/threeee/PAGES/Information/pages/content.html", success: function (data) { console.log(data); $("#attacker").append(data); }}) } for ( var i = 0; i < totalSpheres; i ++ ) { var xp = centerX + Math.sin(startRadians) * circleRadius; var zp = centerZ + Math.cos(startRadians) * circleRadius; group.add( new Element( str, 1000, 1000, new THREE.Vector3(xp, 0, zp), new THREE.Vector3(0, i*incrementAngle * (Math.PI/180.0), 0) ) ); startRadians += incrementRadians; } scene.add(group); renderer.render( scene, camera ); } }); 

 *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { background: #fbc73b; font-family: 'Lato', Arial, sans-serif; color: #fff; } .wrapper { margin: 0 auto 100px auto; max-width: 960px; } .stage { list-style: none; padding: 0; } /************************************* Build the scene and rotate on hover **************************************/ .scene { width: 260px; height: 400px; margin: 30px; float: left; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; } .movie { width: 260px; height: 400px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(-130px); -moz-transform: translateZ(-130px); transform: translateZ(-130px); -webkit-transition: -webkit-transform 350ms; -moz-transition: -moz-transform 350ms; transition: transform 350ms; } .movie:hover { -webkit-transform: rotateY(-78deg) translateZ(20px); -moz-transform: rotateY(-78deg) translateZ(20px); transform: rotateY(-78deg) translateZ(20px); } /************************************* Transform and style the two planes **************************************/ .movie .poster, .movie .info { position: absolute; width: 260px; height: 400px; background-color: #fff; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .movie .poster { -webkit-transform: translateZ(130px); -moz-transform: translateZ(130px); transform: translateZ(130px); background-size: cover; background-repeat: no-repeat; } .movie .info { -webkit-transform: rotateY(90deg) translateZ(130px); -moz-transform: rotateY(90deg) translateZ(130px); transform: rotateY(90deg) translateZ(130px); border: 1px solid #B8B5B5; font-size: 0.75em; } /************************************* Shadow beneath the 3D object **************************************/ .csstransforms3d .movie::after { content: ''; width: 260px; height: 260px; position: absolute; bottom: 0; box-shadow: 0 30px 50px rgba(0,0,0,0.3); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: rotateX(90deg) translateY(130px); -moz-transform: rotateX(90deg) translateY(130px); transform: rotateX(90deg) translateY(130px); -webkit-transition: box-shadow 350ms; -moz-transition: box-shadow 350ms; transition: box-shadow 350ms; } .csstransforms3d .movie:hover::after { box-shadow: 20px -5px 50px rgba(0,0,0,0.3); } /************************************* Movie information **************************************/ .info header { color: #FFF; padding: 7px 10px; font-weight: bold; height: 195px; background-size: contain; background-repeat: no-repeat; text-shadow: 0px 1px 1px rgba(0,0,0,1); } .info header h1 { margin: 0 0 2px; font-size: 1.4em; } .info header .rating { border: 1px solid #FFF; padding: 0px 3px; } .info p { padding: 1.2em 1.4em; margin: 2px 0 0; font-weight: 700; color: #666; line-height: 1.4em; border-top: 10px solid #555; } /************************************* Generate "lighting" using box shadows **************************************/ .movie .poster, .movie .info, .movie .info header { -webkit-transition: box-shadow 350ms; -moz-transition: box-shadow 350ms; transition: box-shadow 350ms; } .csstransforms3d .movie .poster { box-shadow: inset 0px 0px 40px rgba(255,255,255,0); } .csstransforms3d .movie:hover .poster { box-shadow: inset 300px 0px 40px rgba(255,255,255,0.8); } .csstransforms3d .movie .info, .csstransforms3d .movie .info header { box-shadow: inset -300px 0px 40px rgba(0,0,0,0.5); } .csstransforms3d .movie:hover .info, .csstransforms3d .movie:hover .info header { box-shadow: inset 0px 0px 40px rgba(0,0,0,0); } /************************************* Posters and still images **************************************/ .scene:nth-child(1) .movie .poster { background-image: url(../img/withoutblur.jpg); background-size: 260px 400px; } .scene:nth-child(2) .poster { background-image: url(../img/triangulated-image.jpg); background-size: 260px 400px; } .scene:nth-child(3) .poster { background-image: url(../img/defender.jpg); background-size: 260px 400px; } .scene:nth-child(4) .poster { background-image: url(../img/defender.jpg); background-size: 260px 400px; } .scene:nth-child(1) .info header { background-image: url(../img/triangulated.png); } .scene:nth-child(2) .info header { background-image: url(../img/triangulamage.png); } .scene:nth-child(3) .info header { background-image: url(../img/defend.png); } .scene:nth-child(4) .info header { background-image: url(../img/defend.png); } /************************************* Fallback **************************************/ .no-csstransforms3d .movie .poster, .no-csstransforms3d .movie .info { position: relative; } /************************************* Media Queries **************************************/ @media screen and (max-width: 60.75em){ .scene { float: none; margin: 80px auto 80px; } } 

我有这个脚本，我为div创建了一个结构，我想动态地向它添加数据。 一切都很好，除非每次div都填充相同的数据而不是不同的数据。 我想给他们动态的ID。

我做了3个div并添加了不同url的数据，但每次数据显示在同一个div而不是不同的div。