Question

我有一个for循环，它附加一个带有列表项和其他信息的有序列表。

它适用于第一个列表项，但其他列表项不会填充/追加。

我无法找到导致问题的部分代码：

  <script>
         $(document).ready(function(){
            var artistID =$(".artist").attr('id');

            $.get("songs.php?id="+artistID, function(data){
                for (var j=0; j < data.length; j++){
                    $(".songs."+data[j].ArtistNumber).append(
                        '<li class="song">'+
                            '<a class="song-link" onclick="songClick();return false;" href="'+data[j].FileLocation+'">'+
                               '<p>'+data[j].Title+'</p>'+
                                '<small>'+data[j].duration+'</small>'+
                            '</a>'+
                        '</li>'
                    );
                }
            },'json');
        });
  </script>

任何帮助都将不胜感激。

编辑：

事实证明，我所需要的只是一个$（“。artist”）。每个（function（）{}）包裹着它。

我希望这对某人有帮助。

Answer 1

我不确定你的DOM，我需要你的HTML，但这是一个尝试：

 <script>
     $(document).ready(function(){
        var artistID =$(".artist").attr('id');

        $.get("songs.php?id="+artistID, function(data){
            for (var j=0; j < data.length; j++){
                $(".artist").append($("<ul />").addClass(data[j].ArtistNumber).addClass('songs'));
                $(".songs."+data[j].ArtistNumber).html(
                    '<li class="song">'+
                        '<a class="song-link" onclick="songClick();return false;" href="'+data[j].FileLocation+'">'+
                           '<p>'+data[j].Title+'</p>'+
                            '<small>'+data[j].duration+'</small>'+
                        '</a>'+
                    '</li>'
                );
            }
        },'json');
    });

Answer 2

经过多次评论，我终于明白了。以下是如何继续：你想要一个嵌套的'each'循环。

由于您没有提供任何数据结构，我将假设它看起来像这样：

data = {
    "123" : [
               {
                 "title" : "song 1",
                 "fileLocation" : "someURL",
                 "duration" : "2m45s"
               },
               {
                 "title" : "song 2",
                 "fileLocation" : "someOtherURL",
                 "duration" : "4m10s"
               }
            ],


    "456" : [
               {
                 "title" : "song 1",
                 "fileLocation" : "someNewURL",
                 "duration" : "3m20s"
               },
               {
                 "title" : "song 2",
                 "fileLocation" : "someOtherNewURL",
                 "duration" : "4m17s"
               }
            ]
}

我假设您的数据是一个包含键/值的对象，每个键都是艺术家编号，每个值都是该艺术家的歌曲列表（数组）（表示为具有详细信息的对象）。

以下是如何利用数据：

$.each(data, function(artistNumber, songs){ // Iterating through each artist/songs pair. songs is an array

     $list = $(".songs." + artistNumber); // Select each list one by one in the dom

     $.each(songs, function(index, song){ // song is an object

            $list.append(
                        '<li class="song">'+
                            '<a class="song-link" onclick="songClick();return false;" href="'+song.fileLocation+'">'+
                               '<p>'+song.title+'</p>'+
                                '<small>'+song.duration+'</small>'+
                            '</a>'+
                        '</li>'
                    );
      });
});

请参阅this fiddle实际操作。

Answer 3

这仍然不会，因为你为类制作了选择器，并且这是第一个带有类艺术家的项目，你需要更改选择器。试试这个each

仅附加适用于第一个孩子 - 循环问题？

3 个答案: