如何在jquery中复制类似ng-repeat的功能?

时间:2016-06-02 09:43:27

标签: jquery

我是jquery的新手,并且在过去的一年半中一直在Angular 1.x中开发。最近我得到了一个项目,要求我只在jquery中构建它。现在,由于命运将有它,我正在经历角度撤回,无法找出一些东西。 我要做的是在html上需要像ng-repeat这样的功能。 到目前为止我做了什么......

<div class="c-content-blog-post-card-1 c-option-2 c-bordered">
  <div class="c-media c-content-overlay">
    <img class="c-overlay-object img-responsive" src="assets/base/img/content/stock2/04.jpg" alt="">
  </div>
  <div class="c-body">
    <div class="c-title c-font-bold c-font-uppercase">
      <a href="page-blog-single.html" id="post-title"></a>
    </div>
    <div class="c-author">
      By <a href="#"><span class="c-font-uppercase" id = "post-author"></span></a> on <span class="c-font-uppercase" id="post-date"></span>
    </div>
    <div class="c-panel">
      <ul class="c-tags c-theme-ul-bg">
        <li>ux</li>
        <li>web</li>
        <li>events</li>
      </ul>
      <div class="c-comments">
        <a href="#"><i class="fa fa-thumbs-o-up"></i> 30 likes</a>
      </div>
    </div>
    <p id="post-content"></p>
  </div>
</div>

和我的js

$.ajax({
            url: 'http://localhost:8081/blog',
            method : 'GET',
            error : function(data){

            },
            success : function(data){
                data = JSON.parse(data);
                var post = data.posts;
                console.log(post[0]);
                $('#post-title').html(post[0].title);
                $('#post-author').html(post[0].author);
                $('#post-date').html(moment(post[0].createdOn).format("DD MMM YYYY hh:mm a"));
                $('#post-content').html(post[0].content);
            }
        });

这是我想要做的硬编码原始版本。现在我希望整个HTML像ng-repeat一样动态,只有我在post数组中的数字元素的次数。

一个非常粗略的方法是用所有的html代码填充selector.html(),然后根据我的喜好迭代多次,但我确信必须有一些优雅的方法来实现它。

非常感谢帮助。

0 个答案:

没有答案