Question

我的问题是这个。我有一个使用CSS3复制图像的DIV。需要在页面的一侧以设定的间隔重复此Div。即每200px。有没有办法实现自动化。通常我会使用重复的bgimage但在这种情况下不允许使用图像。我也可以每次重复div，但它是一个大页面，会经常更新内容。

非常感谢任何想法。

Answer 1

我会这样做：

文档高度/元素高度+ 200px = x 将元素放入X文档中。

就是这样。

在jQuery中用这个看起来像这样：

在这里试试：http://jsfiddle.net/aF68z/

var repeatMe = function ( $o, space ){
  var oHeight,dHeight, multiplicator, res, html, $parent;

  dHeight = $(document).height(); //height of you document
  oHeight = $o.height(); //height of the element that shoud repeat 
  multiplicator = Math.floor(dHeight / (oHeight + space)); //how many time the element can repeat (including the margin)
  $parent = $o.parent(); //gets the parent that finally will hold all repeating items
  html = $parent.html(); //gets the HTML code of the element that repeats

  /* appending and cloning are very CPU heavy and it makes no sense to do so only for a visual matter, "string" + "string" etc... is very slow if the string becomes long, this is a simple trick how to avoid this: */
  res = [];  
  for (var i = 0; i < multiplicator; ++ i) {
    res.push(html);
  }
  html = res.join("");


  $parent.html(html); //appending the HTML of the all the repeated elements to the parent again.
};

repeatMe( $("div.deco div:eq(0)"),200 );

PS：下次至少自己尝试一下。

Answer 2

$('.myDiv').append($('.myDiv').clone())

并给div一个底边样式为200px

修改对于那些抱怨它不是循环和嵌套Divs

的人
for(i=0;i<10;i++) { $('.myDiv').after($('.myDiv').clone().removeClass('myDiv')) }

Answer 3

使用

.yourClass{
       width:200px;
       height:yourHeightValue;
}
.imgClass{
       text-align:center;
}

并根据需要添加尽可能多的<div class="yourClass"><img class="imgClass" src="..."/></div>。

Answer 4

如果你需要垂直重复div，你可以这样做：

.yourClass{
       height:200px;
       width:whatyouwant;
}

var numberOfDivs = 8;//chose the number you want or calculate it
var div = $('<div>', {class: 'yourClass'});//create your div
for (i=0; i < numberOfDivs ; i++){
     $('.leftSidebar').append(div);
}

Answer 5

如果我没有误解你的问题，这可能会有所帮助。

var times = 10;
var elementToRepeat = $('.myDiv'); 
var lastElement = elementToRepeat;
for(var i = 0 ; i < times ; times++){
   var newElement = elementToRepeat.clone();
   lastElement.after(newElement);
   lastElement = newElement;
}

另外，在div的类中设置一个底部边距，以便它们具有所需的间隔。

是否可以使用jQuery / javascript每隔x个像素重复放置一个DIV

5 个答案: