javascript - 我使用 JQuery 将新的 <li> 项添加到现有的 <ul> 但新的 <li> 与其他 <li> 不同

Question

这是我的模板文件中的代码

<ul class="playListForm" id="playList" style="list-style: none;">
            @foreach($listSong as $song)
            <!--<?php 
                $url = URL::route("listentomusic",$song->id_song."**".$song->title."**".$song->artist."**".$song->code128."**".$song->code320); 
                $urlup = URL::route("voteup", $song->id_song);
                $urldown = URL::route("votedown", $song->id_song);
            ?>-->
            <?php
                $urlsource = 'http://api.mp3.zing.vn/api/mobile/source/song/'.$song->code128;
                if($song->position == 1){
            ?>
                <li id="{{$song->position}}" class="active">
                    <div class="form-inline plItem">
                        <div class="form-group plNum">{{$song->position}}</div>
                        <a id="songURL" href="{{$urlsource}}"><div id="songInfo" class="form-group plTitle" value="{{$song->title}} - {{$song->artist}}">{{$song->title}} - {{$song->artist}}</div>
                        </a>
                        <div class="form-group">
                            <div class="form-inline">
                                <p style="display:none" id="songId">{{$song->id_song}}</p>
                                <button id="upBtn" class="form-group btn btn-default btnUp" style="visibility: hidden;">
                                     Up
                                </button>
                                <button id="dwnBtn" class="form-group btn btn-default btnDown">
                                     Down
                                </button>
                            </div>
                        </div>
                        <hr style="margin-top: 9px">
                    </div>
                </li>
            <?php
                }
                else{
                    if($song->position != count($listSong)){
            ?>
                <li id="{{$song->position}}">
                    <div class="form-inline plItem">
                        <div class="form-group plNum">{{$song->position}}</div>
                        <a id="songURL" href="{{$urlsource}}"><div id="songInfo" class="form-group plTitle" value="{{$song->title}} - {{$song->artist}}">{{$song->title}} - {{$song->artist}}</div></a>
                        <div class="form-group">
                            <div class="form-inline">
                                <p style="display:none" id="songId">{{$song->id_song}}</p>
                                <button id="upBtn" class="form-group btn btn-default btnUp">
                                     Up
                                </button>
                                <button id="dwnBtn" class="form-group btn btn-default btnDown">
                                     Down
                                </button>
                            </div>
                        </div>
                        <hr style="margin-top: 10px">
                    </div>
                </li>
            <?php
                    }
                else{
            ?>  
                <li id="{{$song->position}}">
                    <div class="form-inline plItem">
                        <div class="form-group plNum">{{$song->position}}</div>
                        <a id="songURL" href="{{$urlsource}}"><div id="songInfo" class="form-group plTitle" value="{{$song->title}} - {{$song->artist}}">{{$song->title}} - {{$song->artist}}</div></a>
                        <div class="form-group">
                            <div class="form-inline">
                                <p style="display:none" id="songId">{{$song->id_song}}</p>
                                <button id="upBtn" class="form-group btn btn-default btnUp">
                                     Up
                                </button>
                                <button id="dwnBtn" class="form-group btn btn-default btnDown" style="visibility: hidden;">
                                     Down
                                </button>
                            </div>
                        </div>
                        <hr style="margin-top: 10px">
                    </div>
                </li>
            <?php   
                    }
                }
            ?>
            @endforeach
    </ul>

然后我尝试通过这个 JQuery 代码附加新的“li”:

var newLI = '<li id="'+lastPos+'">'+
                    '<div class="form-inline plItem">'+
                        '<div class="form-group plNum">'+lastPos+'</div>'+
                        '<a id="songURL" href="'+'http://api.mp3.zing.vn/api/mobile/source/song/'+song['code128']+'"><div id="songInfo" class="form-group plTitle" value="'+song['title']+' - '+song['artist']+'">'+song['title']+' - '+song['artist']+'</div></a>'+
                        '<div class="form-group">'+
                            '<div class="form-inline">'+
                                '<p style="display:none" id="songId">'+song['id_song']+'</p>'+
                                '<button id="upBtn" class="form-group btn btn-default btnUp">'+
                                     'Up'+
                                '</button>'+
                                '<button id="dwnBtn" class="form-group btn btn-default btnDown" style="visibility: hidden;">'+
                                     'Down'+
                                '</button>'+
                            '</div>'+
                        '</div>'+
                        '<hr style="margin-top: 10px">'+
                    '</div>'+
                '</li>';
    $('#playList').append(''+newLI+'');

结果如下:

所以我对最后由 JQuery 添加的新 li 有疑问。我真的不知道为什么。我希望你能给我一些建议。谢谢。 P/S:抱歉我的英语不好。

Answer 1

相同的id可能会混淆，用函数生成

function generate(lastPos){
var newLI = '<li id="'+lastPos+'">'+
                    '<div class="form-inline plItem">'+
                        '<div class="form-group plNum">'+lastPos+'</div>'+
                        '<a id="songURL" href="'+'http://api.mp3.zing.vn/api/mobile/source/song/'+song['code128']+'"><div id="songInfo" class="form-group plTitle" value="'+song['title']+' - '+song['artist']+'">'+song['title']+' - '+song['artist']+'</div></a>'+
                        '<div class="form-group">'+
                            '<div class="form-inline">'+
                                '<p style="display:none" id="songId">'+song['id_song']+'</p>'+
                                '<button id="'+lastPos+'_upBtn" class="form-group btn btn-default btnUp">'+
                                     'Up'+
                                '</button>'+
                                '<button id="'+lastPos+'_dwnBtn" class="form-group btn btn-default btnDown" style="visibility: hidden;">'+
                                     'Down'+
                                '</button>'+
                            '</div>'+
                        '</div>'+
                        '<hr style="margin-top: 10px">'+
                    '</div>'+
                '</li>';
    $('#playList').append(''+newLI+'');
}

为 LI 元素调用函数和新 ID。