Question

我想用顶级类来获取每个div并使用.blurb类在div中插入...问题是它添加了太多重复元素并使页面崩溃。这是下面的代码

<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

Answer 1

我想你正在努力实现这个目标：

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

Answer 2

var canInsert = true;

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

        setTimeout(function(){
            canInsert = true;
        }, 500);
    });

Answer 3

假设每个模糊的三个顶部，你可以这样做：

$('.blurb .top').remove();
$('.top').each(function() {
    var __top = $(this);
   if (width < 993) {        
        $(this).clone(true).insertAfter('.blurb');
    } else if (width > 992) {
        $(this).clone(true).insertBefore('.blurb');
    }
});

基本上，只需在添加之前清除模糊顶部。我还添加了clone属性，因为假设您想要添加它们而不仅仅是移动它们，您需要复制原始文件。

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

3 个答案: