Блог

Я создаю список воспроизведения на основе SoundCloud API. У меня есть список, в который при li нажатии будет добавлен новый элемент div к содержимому li . Я использую метод append () для этого, и это работает, но он добавляет элемент div спереди, поэтому текст, который уже существовал в элементе, удаляется. Как я могу это изменить? Мой CSS-код:

 .list > li {
    background:#eee;
    display:block;
    position: relative;
    background:;
    padding:10px;
    box-shadow: inset 0 1px 0 #fff;
}
.currentSong {
    width: 100%;
    height: 100%;
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 0;
}
.currentSongLoad {
    background:black;
    height: 100%;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
}
  

HTML:

 <li>
    <h3 class="name">Jonny Stromberg</h3>
    <p class="release">1986</p>
</li>
  

jQuery:

 $(".list li").click(function () {
    $(this).append("<div class="currentSong"><div class="currentSongLoad"></div></div>");

    SC.get("/tracks/155552335", function (tracks) {
        trackWaveform = tracks.waveform_url;
        $(".name").text(tracks.title);
        $(".release").text(tracks.release_year);
        $(".currentSong").css({
            background: "url("   trackWaveform   ") top center no-repeat red",
            "background-size": "100% 100%",
            width: "100%",
            height: "100%",
            left: "0"
        });
        console.log(trackWaveform);
    });

    SC.stream("/tracks/155552335", function (sound) {
        sound.play({
            whileplaying: function () {
                $(".currentSongLoad").css('width', ((sound.position / sound.duration) * 100)   '%');
            },
        });
    });
});
  

http://jsfiddle.net/danials/6Djwd/8/

Есть идея поместить .currentSong позади других элементов ( h3 и p )?

Бум, ваша проблема решена: h3-p-tags-behind-song-layer

css

 .list {
    font-family:sans-serif;
    margin:0;
    padding:20px 0 0;
}
.list > li {
    height:50px;
    background:#eee;
    display:block;
    position: relative;
    background:;
    padding:10px;
    box-shadow: inset 0 1px 0 #fff;
}
.currentSong {
    width: 100%;
    height: 100%;
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 0;
}
.currentSongLoad {
    background:black;
    height: 100%;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
}
h3 {
    position:absolute;
    color:#fff;
    font-size: 16px;
    margin:0 0 0.3rem;
    font-weight: normal;
    font-weight:bold;
    z-index:999999;
    height:10px;
}
p {
    position:absolute;
    color:#fff;
    margin:0;
    z-index:999999;
    margin-top:25px;
}