Question

我正在尝试多次克隆一个元素。 HTML如下

<html>
<div class="header">This is header</div>

<div class="container">
    <div class="item-wrap">This is an item</div>
    <div class="item-wrap">This is an item</div>
    <div class="item-wrap">This is an item</div>
    <div class="item-wrap">This is an item</div>
    <div class="item-wrap">This is an item</div>
</div>

这只是一个示例代码。在container div内，有许多item-wrap div可用，我正在尝试计算container div的完整高度并将其拆分为零件高度。然后在每个拆分部分之前克隆header div。

这是jQuery代码

<script type="text/javascript">
var viewportHeight = $(window).height();

var header = $('.header').clone();

var i = 0;
$(".item-wrap").each(function (index, domElement) {

    i += parseFloat($(this).outerHeight());

    if(i >= 300 && i < 350){
        $(this).addClass('clone1');
    }
    if(i >= 550 && i < 600){
        $(this).addClass('clone2');
    }
    if(i >= 800 && i < 850){
        $(this).addClass('clone3');
    }
});

$('.clone1').first().html(header);
$('.clone2').first().html(header);
$('.clone3').first().html(header);
</script>

问题是它只进行最后一次拆分。在这种情况下，它是if(i >= 800 && i < 850)前两个拆分不会克隆header div。请帮忙。谢谢！

jQuery克隆多次到多个元素

0 个答案: