用 JSON 填充 HTML 元素

Question

我正在尝试找出对我随身携带的一组重复 HTML 进行 JSON 化的最佳方法。

我有以下代码重复“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

代码笔https://codepen.io/iwant2learn/pen/PEmBMN

提前感谢您的帮助！

Answer 1

如果您的“模板”确实是固定的（没有变体）并且像您发布的那样非常简单....clone() 方法可能会引起您的兴趣。

是的...正如 cmets 中提到的，存在模板库。你也应该看看。但是一个简单的方法是自己做，只使用一个 jQuery 方法，就是给你的每个模板“字段”一个类。

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

注意我在你的 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（更新为无限滚动）

Answer 2

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);
  }
});

.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;
}

<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>

与 Louys 所做的相同，但使用了 for..of 循环，因为它更简洁。