Question

我试图多次将一些HTML附加到div。

以下是我目前的做法： http://jsfiddle.net/9m1cfL4u/

我想总共追加4次，这种方法完全没问题，但是每次调用相同的追加是否有更简洁的方法呢？它看起来很乱，并且“不合适”。对我来说！

感谢您的帮助！

$('.banner').append('<div class="content"></div>');
$('.banner').append('<div class="content"></div>');
$('.banner').append('<div class="content"></div>');
$('.banner').append('<div class="content"></div>');

Answer 1

for循环就足够了。

Updated Example

for (var i = 0; i < 4; i++) {
    $('.banner').append('<div class="content"></div>');
}

..而且没有jQuery：

Example Here

var banner = document.querySelector('.banner'),
    content;

for (var i = 0; i < 4; i++) {
    content = document.createElement('div');
    content.className += 'content';
    banner.appendChild(content);
}

Answer 2

还有一点点做同样事情的方式。

＆＃13;

    $.fn.repeatTimes = function(times, cb) {
      for(var time = 1;time <= times; time += 1) {
        cb.call(this, time);
      }
      return this;
    }

    $(function(){
  
      $('.banner').repeatTimes(4, function(time) {
          this.append('<div class="content">this is ' + time + ' time</div>');
      });
    });

＆＃13;

<div class="banner"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

jQuery - 在不重复代码的情况下多次附加HTML？

2 个答案: