Javascript 用JSON填充HTML元素

我正试图找出最好的方法来对我随身携带的一组重复的HTML进行JSONify

下面的代码重复了“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>

代码笔

提前感谢您的帮助

如果您的“模板”确实是固定的（没有变体），并且与您发布的内容一样简单。。。你可能对这种方法感兴趣

是的。。。正如评论中提到的，存在模板库。你也应该看看。但是，一个简单的方法是，只使用一个jQuery方法，为每个模板“字段”指定一个类

然后用您拥有的JSON填充模板的克隆，并将其附加到文档中

注意，我在CSS中添加了“.template”类来隐藏模板

var myJSONarray=[
{
url:“http://www.google.com",
图像：“https://place-hold.it/370x231/5",
标题：“这是我的第一篇文章”，
作者：“Benjamin K.”，
日期：“2016年9月23日”，
摘要：“知识产权是一种美德，是一种杰出的奉献精神，是劳动和财富的临时契约，是一种最低限度的财富，是一种实践”，
评论：1
},{
url:“https://learn.jquery.com/",
图像：“http://www.desartlab.com/wp-content/uploads/2015/10/jquery_logo.gif",
标题：“这是我的第一个剧本！！！”，
作者：“J.Q.哈里”，
日期：“2017年12月31日”，
摘要：“你可以做你想做的事，如果你有点创造力，我的朋友。”，
评论：172
}
];
$（文档）.ready（函数（）{
对于（i=0；i
var myJSONArray=[{
url:“http://www.google.com",
图像：“https://place-hold.it/370x231/5",
标题：“这是我的第一篇文章”，
作者：“Benjamin K.”，
日期：“2016年9月23日”，
摘要：“知识产权是一种美德，是一种杰出的奉献精神，是劳动和财富的临时契约，是一种最低限度的财富，是一种实践”，
评论：1
}, {
url:“https://learn.jquery.com/",
图像：“http://www.desartlab.com/wp-content/uploads/2015/10/jquery_logo.gif",
标题：“这是我的第一个剧本！！！”，
作者：“J.Q.哈里”，
日期：“2017年12月31日”，
摘要：“你可以做你想做的事，如果你有点创造力，我的朋友。”，
评论：172
}];
$（文档）.ready（函数（）{
用于（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（`${val.comments}`）；
clone.removeClass（“模板”）；
$（“.template spot”）.append（克隆）；
}
})；
.template{
显示：无；
}
.包装纸{
位置：相对位置；
宽度：100%；
溢出：隐藏；
}
.内在内容{
填充：50px 0 57px；
}
.集装箱{
最大宽度：700px；
宽度：100%；
保证金：0自动；
}
.科长{
边缘底部：22px；
}
.部门主管h2{
字体大小：300；
}
第1.2条{
填充底部：30px；
边缘底部：30px；
}
文章{
边框底部：1px实心#eeeee；
垫底：15px；
边缘底部：30px；
}
文章，文章大拇指{
位置：相对位置；
溢出：隐藏；
背景：#fff；
}
文章：悬停。文章拇指{
背景：#000；
}
第条.第条img{
宽度：100%；
}
第条.第条{}
第条.第条拇指：悬停img{}
文章摘要{
填充：9px0；
}
文章.元{
边缘顶部：2倍；
}
.元跨度{
字体大小：14px；
颜色：#787878；
}
a、 链接：悬停，
a{
颜色：#333；
}
a、 链接，
a:悬停{
颜色：#33ccff；
}
.小标题{
字体大小：10px；
字母间距：0.10em；
字体大小：粗体；
线高：18px；
颜色：#333333；
边缘底部：5px；
文本转换：大写；
}

最新比特
通过
2016年9月23日
1.
Lorem ipsum door sit amet，Concetetetur adipiscing elit，sed do eiusmod temporal incident ut labour and dolore magna aliqua.ut enim ad minimum veniam，quis nostrud execution ullamco
为此，您应该检查模板库，如下划线、把手等。它们正是为此目的而开发的。我发现了大量的示例，每个人都在讲述如何使用下划线或小胡子（这有其自身的原因）.对我来说，我需要一些类似于你展示的东西。太棒了。谢谢你。我会尝试一下，如果我有任何问题，我会问你。你认为如果我在一个页面上使用json文件创建800多个类似的项目会对性能产生影响吗？我认为没有比使用模板l更大的性能问题了ib.；）谢谢。如果我告诉过你，我必须在多个页面上重复这一点，每个页面上都有不同的json文件，但使用相同的模板，你会推荐一种替代方法，还是仍然建议我使用你之前提出的解决方案。我在这里寻找一种最佳实践。这只是一个JS循环……你的大页面的“滞后”是图像…如果有像800这样的图像…它们最好是轻的。但是模板库也会出现同样的问题。
<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>

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