jquery动态平添html元素

jquery动态添加html元素
如何用jquery添加复杂元素?
我要添加如下复杂的元素怎么办?before().append()吗?
其实:

<ul class="thumbnails"></ul>

里面是四个相同的元素怎么用循环加入?

<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="jquery动态平添html元素"
style="width: 300px; height: 200px;"
src="">
<div class="caption">
<ul class="project-one">
<li class="project-title"><a href="${ctx }/project/detail?id=" title="">
这里是用来写项目的简介的。。。。 </a></li>
<li class="project-function"><a
href="#"><i class="address"></i>成都</a> <a class="persent" href="#"> 58% </a></li>
<li class="project-stats">
<div class="project-jindu">
<div class="projectpledged" style="width: 30%;"></div>
</div>
<div class="projectstats">
<p class="widtha">
<strong> 122 </strong> 关注
</p>
<p class="widthb">
<strong><b>￥</b> 1028 </strong> 筹资
</p>
<p class="widthc">
<strong> 36<b>天</b>
</strong> 剩余时间
</p>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="jquery动态平添html元素"
style="width: 300px; height: 200px;"
src="">
<div class="caption">
<ul class="project-one">
<li class="project-title"><a href="${ctx }/project/detail?id=" title="">
这里是用来写项目的简介的。。。。 </a></li>
<li class="project-function"><a
href="#"><i class="address"></i>成都</a> <a class="persent" href="#"> 58% </a></li>
<li class="project-stats">
<div class="project-jindu">
<div class="projectpledged" style="width: 30%;"></div>
</div>
<div class="projectstats">
<p class="widtha">
<strong> 122 </strong> 关注
</p>
<p class="widthb">
<strong><b>￥</b> 1028 </strong> 筹资 
 
</p>
<p class="widthc">
<strong> 36<b>天</b>
</strong> 剩余时间
</p>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="jquery动态平添html元素"
style="width: 300px; height: 200px;"
src="">
<div class="caption">
<ul class="project-one">
<li class="project-title"><a href="${ctx }/project/detail?id=" title="">
这里是用来写项目的简介的。。。。 </a></li>
<li class="project-function"><a
href="#"><i class="address"></i>成都</a> <a class="persent" href="#"> 58% </a></li>
<li class="project-stats">
<div class="project-jindu">
<div class="projectpledged" style="width: 30%;"></div>
</div>
<div class="projectstats">
<p class="widtha">
<strong> 122 </strong> 关注
</p>
<p class="widthb">
<strong><b>￥</b> 1028 </strong> 筹资
</p>
<p class="widthc">
<strong> 36<b>天</b>
</strong> 剩余时间
</p>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="jquery动态平添html元素"
style="width: 300px; height: 200px;"
src="">
<div class="caption">
<ul class="project-one">
<li class="project-title"><a href="${ctx }/project/detail?id=" title="">
这里是用来写项目的简介的。。。。 </a></li>
<li class="project-function"><a
href="#"><i class="address"></i>成都</a> <a class="persent" href="#"> 58% </a></li>
<li class="project-stats">
<div class="project-jindu">
<div class="projectpledged" style="width: 30%;"></div>
</div>
<div class="projectstats">
<p class="widtha">
<strong> 122 </strong> 关注
</p>
<p class="widthb"> 
 
<strong><b>￥</b> 1028 </strong> 筹资
</p>
<p class="widthc">
<strong> 36<b>天</b>
</strong> 剩余时间
</p>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>

jquery javascript
[解决办法]

引用:

Quote: 引用:

$('.thumbnails').html('<li class="span3">..4个元素的HTML....</li>');

页面里已经存在好多个.thumbnails了

你是要第一个，最后一个，还是加ID,其它标识区分
[解决办法]
$('body .thumbnails:nth-child(1)').html('<li class="span3">..4个元素的HTML....</li>');
用nth-child来控制第几个.thumbnails
[解决办法]
LZ有两种方式，一种硬编码，见下：

var html = "<li class='span3'><div class='thumbnail'><img data-src='holder.js/300x200' alt='300x200' style='width:300px;height:200px;' src=''><div class='caption'><ul class='project-one'><li class='project-title'><a href='${ctx}/project/detail?id=' title=''>这里是用来写项目的简介的。。。。</a></li><li class='project-function'><a href='#'><i class='address'></i>成都</a><a class='persent'href='#'>58%</a></li><li class='project-stats'><div class='project-jindu'><div class='projectpledged' style='width:30%;'></div></div><div class='projectstats'><p class='widtha'><strong>122</strong>关注</p><p class='widthb'><strong><b>￥</b>1028</strong>筹资</p><p class='widthc'><strong>36<b>天</b></strong>剩余时间</p></div></li></ul></div></div></li>";
$(html).appendTo("ul.thumbnails");

如果有多个，可以写成：

$(html).appendTo("ul.thumbnails:eq(" + idx + ")"); 
 

另一种，动态生成，参数灵活设置。举个例子。
从内容上看，有以下标签：<div><li><ul><a><img><p>，一些<i><strong>标签可以转为相应的style
比如下面获取ul标签

function GetTagUL(attr, style, html) {
   var tagUL = $("<ul></ul>");
   if (attr !== undefined && $.trim(attr) !== "") {
      $(tagUL).attr(attr);
   }
   if (style !== undefined && $.trim(style) !== "") {
      $(tagUL).css(style);
   }
   if (html !== undefined && $.trim(html) !== "") {
      $(tagUL).html(html);
   }
   return tagUL;
}

外部使用：

var ul = GetTagUL({ id: 'ul' }, { "text-align": "center" }, "content");
$(ul).appendTo("ul.thumbnails");

查看更多 下一篇