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

【问题标题】：Is it possible to use jQuery/javascript to place a place a DIV repeatedly every x pixels是否可以使用 jQuery/javascript 每 x 像素重复放置一个 DIV
【发布时间】：2011-07-27 14:27:14
【问题描述】：

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

任何想法都将不胜感激。

【问题讨论】：

您说您“使用 css3 复制图像”，换句话说，您说不允许使用任何图像。具体是什么背景？
我正在使用 css3 来生成看似图像的内容。很抱歉造成混乱
@Litek：我猜它会像“使用 CSS3 复制”一样复制。
div 必须在绝对位置、固定位置或页面流中？页面加载后文档高度会发生变化吗？
文档高度保持不变。我有一个左栏和一个名为 .hole 的 div，我希望在左栏内垂直每隔“200px”重复一次

标签： javascript jquery image css repeat

【解决方案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：下次至少自己尝试一下。

【讨论】：

我没有给你投反对票，但我猜你把问题复杂化了
@Abe Petrillo：它是性能最佳的解决方案，通用且完整。否决票是针对错误、误导或冒犯的答案，而不是超出例外范围接缝复杂的答案。例如，您的答案就是错误的，因为

【解决方案2】：

使用

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

并根据需要添加任意数量的<div class="yourClass"><img class="imgClass" src="..."/></div>。

【讨论】：

这与 “通常我会使用重复的 bgimage 但在这种情况下不允许使用图像” 有点问题...
您已对其进行了编辑，但这与问题的“不允许使用图像” 位不符...
您要复制图像并且“不允许图像”？祝你好运！
复制：制作一个精确的副本；再现。看看this link 使用纯 CSS 复制 Homer Simpson :)
我查看了您的链接。没有复制的图像。他们对多个 div 使用背景颜色来产生“图像效果”。

【解决方案3】：

如果您需要垂直重复 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);
}

【讨论】：

【解决方案4】：

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

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 的类设置一个边距底部，以便它们具有所需的分隔。

【讨论】：

现在试试times = 1000 玩得开心:) 这会很慢。

【解决方案5】：

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

并为 div 设置 200px 的底部边距样式

编辑： 对于那些抱怨它不是循环和嵌套 Div 的人

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

【讨论】：

这个只做一次，不回答问题。
你可以用for(var i=1;i<Math.Floor(document.height/(size_of_div+200));i++){ /* ... */ };包装它
@enki +1 或者你会阅读我的答案，确实如此；）但是克隆非常慢，你不应该克隆，特别是如果页面很长。
document.height 不是很好，$(document).height() 应该更好兼容
将其包装在 for 循环中，效果很好，感谢您的帮助