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

Append only working for first child - looping issue?

本文关键字:循环 问题 第一个 适用于      更新时间:2023-12-28

我有一个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").each(function(){})就可以了。

我希望这能对某人有所帮助。

经过多次评论,我终于明白你的意思了。下面是如何进行的:您想要一个嵌套的"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>'
                    );
      });
});

看看这把小提琴在演奏。

我不在乎你的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');
    });

这仍然不会,因为你为类制作了选择器,并且这是用类艺术家获得的第一个项目,所以你需要更改选择器。试试这个每个