javascript - 在窗口调整大小之前和之后插入div

我想让每个div都具有top类，并在div中插入一个.blurb类。问题是它添加了太多重复的元素并使页面崩溃了。这是下面的代码

<div class="top">top1</div>
<div class="top">top2</div>
<div class="top">top3</div>

<div class="blurb">
    <p>Blurb Copy</p>
    <p>Blurb Copy</p>
    <p>Blurb Copy</p>
</div>

<div class="blurb">
    <p>Blurb Copy</p>
    <p>Blurb Copy</p>
    <p>Blurb Copy</p>
</div>

<div class="blurb">
    <p>Blurb Copy</p>
    <p>Blurb Copy</p>
    <p>Blurb Copy</p>
</div>

function sizeUpdate() {
    var width = $(window).width(); // Get window width
    var height = $(window).height(); // Get window height

    $('.top').each(function(){
        if (width < 993) {
            $(this).insertAfter('.blurb');
        } else if (width > 992) {
            $(this).insertBefore('.blurb');
        }
    });
};

$(document).ready(sizeUpdate); // When the page first loads
$(window).resize(sizeUpdate); // When the browser changes size

最佳答案

我想您正在尝试实现以下目标：

    $('.top').each(function(index){
    if (width < 993) {
        $(this).insertAfter($('.blurb')[index]);
    } else if (width > 992) {
        $(this).insertBefore($('.blurb')[index]);
    }
});