[英]I use JQuery to add new <li> item to the existing <ul> but the new <li> deviates from other <li>
This is the code about in my template file 这是我模板文件中的代码
<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>
And I tried to append new "li" by this JQuery code: 我试图通过此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+'');
And here is the result: 结果如下:
So I have a problem about the new li at the last which I added by JQuery. 所以最后我对JQuery添加的新li产生了问题。 I really don't know why.
我真的不知道为什么 I hope you could give me some advices.
希望您能给我一些建议。 Thank you.
谢谢。 P/S: Sorry for my bad English.
P / S:对不起,我的英语不好。
Same id maybe confused, generate with function 相同的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+'');
}
call function and new id for LI Element. 调用函数和LI Element的新ID。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.