<div class="container">
<div class="tokens">
<ul class="tokenlist list-inline">
<li>
<div class="input">
<input type="text" class="king" placeholder="enter ur mail">
</div>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
;$.fn.pressEnter = function(fn) {
return this.each(function() {
$(this).bind('enterPress', fn);
$(this).keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterPress");
}
})
});
};
$('.king').pressEnter(function(){
var inputtval=$('.king').val();
if(inputtval.length>0){
$("ul.tokenlist").prepend('<li>'+inputtval+' <i class="cros fa fa-times cros"></i> </li>');
$('.king').val('');
}else{
$(this).attr("placeholder", "write somthing");
}
});
$('.tokenlist').on('click','.cros',function(){
$(this).parents('li').remove();
});
});
</script>
<style>
.king{
border:0px;
/*background-color:#eee;*/
}
i.cros{
font-weight: 100;
cursor: pointer;
}
ul.tokenlist li{
border: 1px solid #eee;
background-color:#eee;
margin: 5px;
border-radius: 10px;
}
ul.tokenlist li:last-child{
border:0;
background-color:#fff;
}
ul.tokenlist {
border: 1px solid rgb(194, 194, 194);
width: 100%;
margin: 3px;
}
</style>
上面的代码我正在使用prepend,我试图使用append它不工作... append prepend不是我的concepet,我输入inputfild并点击输入它应该显示输入filde的左侧.. 在上面的代码中,我想将li作为last-child(2)或者最后但是只有一个孩子,并且我追加的应该是输入filde的左侧,现在我追加它的是左侧但它应该是左侧输入fild Fiddle link
答案 0 :(得分:0)
您需要在列表中的最后一项之前插入新<li>
,而不是预先添加新$('<li>'+inputtval+' <i class="cros fa fa-times cros"></i> </li>').insertBefore($("ul.tokenlist").children().last());
。看到这个小提琴。 https://jsfiddle.net/bch371ff/1/
{{1}}