Erstellen Sie Elemente dynamisch mit jQuery ⇐ CSS

[Anonymous]

Ich versuche, dynamisch einen Div-Block für meinen Schieberegler zu erstellen. Er wird immer dann erstellt, wenn sich der aktuell abgespielte Song ändert, und ich schaffe es einfach nicht, ihn richtig zum Laufen zu bringen. Und wie würden Sie den Umgang mit Song-, Interpreten- und Albumnamen empfehlen? Mir ist klar, dass ID bedeutet, dass es eindeutig ist, sodass nur der erste Block korrekt gerendert wird und in den anderen Blöcken keine Daten angezeigt werden. Gibt es eine Möglichkeit, für jeden Block in der jQuery eindeutige IDs zu erstellen, ohne dass diese im HTML enthalten sind?


Hier ist der HTML-Code:

Code: Select all

[img]http://indianassist.mx/img/downArrow.png[/img]






[img]https://s-media-cache-ak0.pinimg.com/736x/24/28/10/242810087197ad884c0d895c2953a740.jpg[/img]
songName
songName
songName
[img]http://indianassist.mx/img/downArrow.png[/img]






[img]https://s-media-cache-ak0.pinimg.com/736x/24/28/10/242810087197ad884c0d895c2953a740.jpg[/img]
songName
songName
songName
[img]http://indianassist.mx/img/downArrow.png[/img]

Das JS:

Code: Select all

var swiperSlide = document.createElement('div');
swiperSlide.className = 'swiper-slide';

var getCurrentTrack = document.createElement('div');
getCurrentTrack.className = 'getCurrentTrack';

var trackTemplate = document.createElement('div');
trackTemplate.className = 'trackTemplate';

var image = document.createElement('img');
image.src = jsonPushData.songURL;
image.height = 400;
image.width =400;

var song = document.createElement('figcaption');
song.text = jsonPushData.songName;

var artist = document.createElement('figcaption');
artist.text = jsonPushData.artistName;

var album = document.createElement('figcaption');
album.text = jsonPushData.albumName;

var add = document.createElement('img');
add.src = document.getElementById('add').src;

trackTemplate.appendChild(image);
trackTemplate.appendChild(song);
trackTemplate.appendChild(artist);
trackTemplate.appendChild(album);
trackTemplate.appendChild(add);

getCurrentTrack.appendChild(trackTemplate);
swiperSlide.appendChild(getCurrentTrack);

$('swiper-wrapper').prepend(swiperSlide);

Ich habe auch diese Methode ausprobiert:

Code: Select all

$('swiper-wrapper').prepend($('', {class: 'swiper-slide'}).append(
$('', {class: 'getCurrentTrack'}).append(
$('', {class: 'trackTemplate'}).append(
$('', {src: jsonPushData.AlbumArt, width: 350, height: 350}),
$('', {class: songName, text: playbackArray[0].songName}),
$('', {class: artistName, text: playbackArray[0].artistName}),
$('', {class: albumName, text: playbackArray[0].albumName}),
$('', {class: 'invert', src: 'http://indianassist.mx/img/downArrow.png', width: 20, height: 20})))));