[英]How to append a text to div from jquery?
我已经使用jquery附加了它,但它永远不会显示在下拉列表中
for (var key in data)
{
//alert(data[key]["type"] + data[key]["id"] + data[key]["message"]);
//$str = $str+;
$(".notiDiv").append('<div class="row" style="margin: 1px">\n\<div class="col - sm - 8">\n\<a href="#">' user have created a meeting'</a>\n\</div>\n\<div class="form - group col - sm - 4 text - right" >\n\<a><span class=" glyphicon glyphicon - ok"></span></a>\n\<a><span class=" glyphicon glyphicon - remove"></span></a>\n\</div>\n\</div>\n');
}
<div class="dropdown-menu dropdown-menu-custom " >
<div class="notiDiv">
</div>
</div></li>
您已经在类名和\\ n中使用了一些意外的空格,应该删除那些空格
您的代码将像
$(".notiDiv").append('<div class="row" style="margin: 1px"><div class="col-sm-8"><a href="#!">user have created a meeting</a></div><div class="form-group col-sm-4 text-right" ><a href="#!"><span class=" glyphicon glyphicon-ok"></span></a><a href="#!" ><span class=" glyphicon glyphicon-remove"></span></a></div></div>');
一旦您修复了所有Satpal建议的JS错误(如有); 您将需要以编程方式初始化bootstrap下拉列表,如下所示:
for (var key in data)
{
//alert(data[key]["type"] + data[key]["id"] + data[key]["message"]);
//$str = $str+;
$(".notiDiv").append('<div class="row" style="margin: 1px">\n\<div class="col - sm - 8">\n\<a href="#">' user have created a meeting'</a>\n\</div>\n\<div class="form - group col - sm - 4 text - right" >\n\<a><span class=" glyphicon glyphicon - ok"></span></a>\n\<a><span class=" glyphicon glyphicon - remove"></span></a>\n\</div>\n\</div>\n');
}
$(".notiDiv").dropdown(); //re-init dropdowm once all options has been appended
您可以在此处检查代码,我为您创建了一个示例
http://plnkr.co/edit/seRGvP?p=preview
$( document ).ready(function() {
var data = {
"flammable": "inflammable",
"duh": "no duh"
};
$.each(data, function( key, value ) {
//alert( key + ": " + value );
$(".notiDiv").append('<div class="row" style="margin: 1px">\n\<div class="col - sm - 8">\n\<a href="#">' + value + '</a>\n\</div>\n\<div class="form - group col - sm - 4 text - right" >\n\<a><span class=" glyphicon glyphicon - ok"></span></a>\n\<a><span class=" glyphicon glyphicon - remove"></span></a>\n\</div>\n\</div>\n');
});
});
或与数组
$( document ).ready(function() {
var data = ['aaaaaaaaaaaa','bbbbbbbbbbbbbb','ccccccccccccc','dddddddddddd','eeeeeeeeeeee','ffffffffffffff','ggggggggggg','jjjjjjjjjjjj'];
$(data).each( function( index, value ) {
//alert( index + ": " + value );
//$( ".notiDiv" ).append( value );
$(".notiDiv").append('<div class="row" style="margin: 1px">\n\<div class="col - sm - 8">\n\<a href="#">' + value + '</a>\n\</div>\n\<div class="form - group col - sm - 4 text - right" >\n\<a><span class=" glyphicon glyphicon - ok"></span></a>\n\<a><span class=" glyphicon glyphicon - remove"></span></a>\n\</div>\n\</div>\n');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.