Question

我想知道如何用div包围每个函数。下面是一个函数，它将为每个播放列表生成Soundcloud API的标题和轨道。我想要的是围绕每张专辑＆＃34; /＆＃34;播放列表＆＃34;使用div元素，如下所示：

<div id="album-one">
    <h2></h2>
    <ul>
        <li>Track name</li>
        <li>Track name</li>
    </ul>
</div>

<div id="album-two">
    <h2></h2>
    <ul>
        <li>Track name</li>
        <li>Track name</li>
    </ul>
</div>

这是我目前的代码：

$(playlists).each(function (index, playlist) {

    $('.list-of-links').append($('<li></li>').html('<a href="#">' + playlist.title + '</a>'));
    $('#playlist').append($('<h2></h2>').html(playlist.title));

    var count = 0;

    // Get each track of the playlist
    $(playlist.tracks).each(function (index, track) {
        index = index + 1;
        $('#playlist').append($('<li data-id="' + track.id + '"></li>').html('<a href="#" class="play">Play</a> <a href="#" class="pause">Pause</a>' + (index++) + ' / ' + track.title + '  ' + track.playback_count));
        $("#cover").append('<div><img src="' + track.artwork_url.replace('-large', '-t500x500') + '"></div>');

    });

});

我的HTML标记：

<main class="col-md-9">
    <ul class="list-of-links">
        <li><a href="#" class="current">Bleep</a></li>
        <li><a href="#">Machine</a></li>
        <li><a href="#">Cinematographic</a></li>
        <li><a href="#">Micro</a></li>
        <li><a href="#">Songs that might be</a></li>
</ul><!-- End ul.list-of-links -->

<section class="row albums">
    <figure id="cover" class="col-md-7"></figure>

    <div id="playlist" class="col-md-5">
    </div><!-- End div#playlist .col-md-5 -->

    </section><!-- End section.albums -->      

    <footer id="footer" class="alignRight">
                    <img src="images/soundcloud.png" alt="SoundCloud Credits">
    </footer><!-- End footer#footer .alignRight -->

如何在div中包装jQuery函数？

0 个答案: