我正在尝试找出JSONify与我一起重复HTML的最佳方法。
我有以下代码重复#34; n"次数。
<article class="style2">
<div class="row">
<div class="col-md-6 col-sm-6">
<a href="http://www.google.com">
<div class="article-thumb">
<img src="https://place-hold.it/370x231/5" class="img-responsive" alt=""/>
</div>
</a>
</div>
<div class="col-md-6 col-sm-6">
<div class="post-excerpt">
<h3><a href="http://www.google.com">This is my first article</a></h3>
<div class="meta">
<span>by <a href="#" class="link">Benjamin K.</a></span>
<span>on Sep 23, 2016</span>
<span class="comment"><i class="fa fa-comment-o"></i> 1</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
<a href="http://www.google.com" class="small-title rmore">Read More</a>
</div>
</div>
</div>
</article>
我想创建一个类似的模板(建议欢迎)
<article class="style2">
<div class="row">
<div class="col-md-6 col-sm-6">
<a href="">
<div class="article-thumb">
<img src="" class="img-responsive" alt=""/>
</div>
</a>
</div>
<div class="col-md-6 col-sm-6">
<div class="post-excerpt">
<h3><a href=""></a></h3>
<div class="meta">
<span>by <a href="" class="link"></a></span>
<span></span>
<span class="comment"><i class="fa fa-comment-o"></i> </span>
</div>
<p></p>
<a href="" class="small-title rmore">Read More</a>
</div>
</div>
</div>
</article>
然后根据JSON文件动态生成此元素。 JSON的内容类似于以下内容:
url = http://www.google.com
image = https://place-hold.it/370x231/5
title = This is my first article
author = Benjamin K.
date = Sep 23, 2016
abstract = Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
comments = 1
CodePen https://codepen.io/iwant2learn/pen/PEmBMN
提前感谢您的帮助!
答案 0 :(得分:2)
如果你的“模板”确实是固定的(没有变种),而且你发布的内容非常简单...... .clone()
方法可能对你有用。
是的......正如评论中提到的,存在模板库。你也应该看。但是,使用一个jQuery方法自己做一个简单的方法就是给你的每个模板“field”一个类。
然后使用您拥有的jsons填充模板的克隆并将其附加到文档中。
注意我在CSS中添加的“.template”类来隐藏模板。
var myJSONarray = [
{
url : "http://www.google.com",
image : "https://place-hold.it/370x231/5",
title : "This is my first article",
author : "Benjamin K.",
date : "Sep 23, 2016",
abstract : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco",
comments : 1
},{
url : "https://learn.jquery.com/",
image : "http://www.desartlab.com/wp-content/uploads/2015/10/jquery_logo.gif",
title : "This is my first script!!!",
author : "J. Q. Harry",
date : "Dec 31, 2017",
abstract : "You can do what you want, if you are a bit creative, my friend.",
comments : 172
}
];
$(document).ready(function(){
for(i=0;i<myJSONarray.length;i++){
var clone = $(".template").clone();
clone.find(".template-url").attr("href",myJSONarray[i].url);
clone.find(".template-title").find("a").html(myJSONarray[i].title);
clone.find(".template-image").attr("src",myJSONarray[i].image);
clone.find(".template-author").html(myJSONarray[i].author);
clone.find(".template-date").html(myJSONarray[i].date);
clone.find(".template-abstract").html(myJSONarray[i].abstract);
clone.find(".template-comment").html('<i class="fa fa-comment-o"></i> '+myJSONarray[i].comments);
clone.removeClass("template");
$(".template-spot").append(clone);
}
});
.template{
display:none;
}
.wrapper {
position: relative;
width: 100%;
overflow: hidden;
}
.inner-content {
padding: 50px 0 57px;
}
.container {
max-width: 700px;
width: 100%;
margin: 0 auto;
}
.section-head {
margin-bottom: 22px;
}
.section-head h2 {
font-weight: 300;
}
article.style2 {
padding-bottom: 30px;
margin-bottom: 30px;
}
article {
border-bottom: 1px solid #eeeeee;
padding-bottom: 15px;
margin-bottom: 30px;
}
article .article-thumb {
position: relative;
overflow: hidden;
background: #fff;
}
article:hover .article-thumb {
background: #000;
}
article .article-thumb img {
width: 100%;
}
article .article-thumb img {
}
article .article-thumb:hover img {
}
article .post-excerpt {
padding: 9px 0;
}
article .meta {
margin-top: 2px;
}
.meta span {
font-size: 14px;
color: #787878;
}
a.link:hover, a {
color: #333;
}
a.link, a:hover {
color: #33ccff;
}
.small-title {
font-size: 10px;
letter-spacing: 0.10em;
font-weight: bold;
line-height: 18px;
color: #333333;
margin-bottom: 5px;
text-transform: uppercase;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="inner-content">
<div class="container">
<div class="section-head">
<h2>Latest Bits</h2>
</div>
<div class="row">
<div class="col-md-8 template-spot">
<article class="style2 template">
<div class="row">
<div class="col-md-6 col-sm-6">
<a href="http://www.google.com" class="template-url">
<div class="article-thumb">
<img src="https://place-hold.it/370x231/5" class="img-responsive template-image" alt=""/>
</div>
</a>
</div>
<div class="col-md-6 col-sm-6">
<div class="post-excerpt">
<h3 class="template-title"><a href="http://www.google.com" class="template-url">This is my first article</a></h3>
<div class="meta">
<span>by <a href="#" class="link template-author">Benjamin K.</a></span>
<span class="template-date">on Sep 23, 2016</span>
<span class="comment template-comment"><i class="fa fa-comment-o"></i> 1</span>
</div>
<p class="template-abstract">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
<a href="http://www.google.com" class="small-title rmore">Read More</a>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
CodePen (以无限滚动更新)
答案 1 :(得分:1)
var myJSONArray = [{
url: "http://www.google.com",
image: "https://place-hold.it/370x231/5",
title: "This is my first article",
author: "Benjamin K.",
date: "Sep 23, 2016",
abstract: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco",
comments: 1
}, {
url: "https://learn.jquery.com/",
image: "http://www.desartlab.com/wp-content/uploads/2015/10/jquery_logo.gif",
title: "This is my first script!!!",
author: "J. Q. Harry",
date: "Dec 31, 2017",
abstract: "You can do what you want, if you are a bit creative, my friend.",
comments: 172
}];
$(document).ready(function() {
for (const val of myJSONArray) {
var clone = $(".template").clone();
clone.find(".template-url").attr("href", val.url);
clone.find(".template-title").find("a").html(val.title);
clone.find(".template-image").attr("src", val.image);
clone.find(".template-author").html(val.author);
clone.find(".template-date").html(val.date);
clone.find(".template-abstract").html(val.abstract);
clone.find(".template-comment").html(`<i class="fa fa-comment-o"></i> ${val.comments}`);
clone.removeClass("template");
$(".template-spot").append(clone);
}
});
&#13;
.template {
display: none;
}
.wrapper {
position: relative;
width: 100%;
overflow: hidden;
}
.inner-content {
padding: 50px 0 57px;
}
.container {
max-width: 700px;
width: 100%;
margin: 0 auto;
}
.section-head {
margin-bottom: 22px;
}
.section-head h2 {
font-weight: 300;
}
article.style2 {
padding-bottom: 30px;
margin-bottom: 30px;
}
article {
border-bottom: 1px solid #eeeeee;
padding-bottom: 15px;
margin-bottom: 30px;
}
article .article-thumb {
position: relative;
overflow: hidden;
background: #fff;
}
article:hover .article-thumb {
background: #000;
}
article .article-thumb img {
width: 100%;
}
article .article-thumb img {}
article .article-thumb:hover img {}
article .post-excerpt {
padding: 9px 0;
}
article .meta {
margin-top: 2px;
}
.meta span {
font-size: 14px;
color: #787878;
}
a.link:hover,
a {
color: #333;
}
a.link,
a:hover {
color: #33ccff;
}
.small-title {
font-size: 10px;
letter-spacing: 0.10em;
font-weight: bold;
line-height: 18px;
color: #333333;
margin-bottom: 5px;
text-transform: uppercase;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="inner-content">
<div class="container">
<div class="section-head">
<h2>Latest Bits</h2>
</div>
<div class="row">
<div class="col-md-8 template-spot">
<article class="style2 template">
<div class="row">
<div class="col-md-6 col-sm-6">
<a href="http://www.google.com" class="template-url">
<div class="article-thumb">
<img src="https://place-hold.it/370x231/5" class="img-responsive template-image" alt="" />
</div>
</a>
</div>
<div class="col-md-6 col-sm-6">
<div class="post-excerpt">
<h3 class="template-title"><a href="http://www.google.com" class="template-url">This is my first article</a></h3>
<div class="meta">
<span>by <a href="#" class="link template-author">Benjamin K.</a></span>
<span class="template-date">on Sep 23, 2016</span>
<span class="comment template-comment"><i class="fa fa-comment-o"></i> 1</span>
</div>
<p class="template-abstract">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
<a href="http://www.google.com" class="small-title rmore">Read More</a>
</div>
</div>
</div>
</article>
</div>
</div>
&#13;
与Louys的做法相同,但使用for..of
循环更清洁。