0

我的问题很简单

我有一个 div 类元素，如下所示：

<div class="square">

<div class ="inner">
<img src="square.jpg" alt="square"> 
</div>

现在，我想做的是复制/乘以“.square”元素，直到它填满父 div“#wrapper”的空间。但我不想在 HTML 中复制粘贴元素 200 次，所以我想知道是否有一个 javascript / jquery 选项。

另一个问题是，当元素填满整个父 div 空间时，我是否可以以某种方式停止乘法。

我更像是编程领域的新手，但总是渴望学习和发现，所以如果我的问题看起来很愚蠢或有一个明显的答案，请分享它，这样我可能会记得有一天它也很愚蠢。

4

1 回答 1

1

一种方法是基础数学。只要总使用面积小于总可用面积，您就可以确定总可用面积并继续添加元素。

var outer = $('.square'), inner = $('.inner')
    totalArea = outer.width() * outer.height(),

    usedArea = inner.outerWidth() * inner.outerHeight();

while(usedArea < totalArea) {
    $('<div/>').addClass('inner').appendTo(outer);
    usedArea += inner.outerWidth() * inner.outerHeight();
}

工作演示

于 2013-05-19T15:14:02.383 回答