jQuery：根据浏览器宽度更改div放置

2024年1月18日 164次阅读

我有28个div,左边都有一个宽度和宽度.高度为200px,每个div的右侧和底部有5px的边距.我已经成功地想出了如何通过
jquery将其他div放在其他div之后.我是这样做的.

$(‘.inner：nth-​​child(10)’).after(‘< div class =“test”>‘);

这很棒！但我想要做的是根据浏览器宽度改变“内部”div类nth-child位置,并且我已经设法让它工作了一些.

这是我正在使用的代码：

var $window = $(window);

function checkWidth() {
    var windowsize = $window.width();
    if (windowsize > 440) {
     $( '.inner:nth-child(10)' ).after( '<div class="test">');
    }
}

// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);

因此,当观看者浏览器宽度超过440px时,我告诉我的浏览器在第10个“test”div之后显示div“inner”.同样,这有点起作用.当浏览器宽度超过440px时,它会在正确位置成功显示“内部”div,当浏览器宽度低于440px时,它也不会显示div.但是最大的问题是无论何时调整窗口大小,都会开始创建一大堆div.这对我来说非常令人费解.以下是用于演示我的问题的jsFiddle：

http://jsfiddle.net/EUqEm/2/

您将看到它一目了然看起来工作正常,但如果您在jsfiddle中调整HTML窗口的大小,则会开始创建一堆div.实际上,div应该始终保持在第10个内部div之后的正确位置.相反,它只是在调整窗口大小时创建了一堆其他div.

如果有人能帮助我解决这个问题并在jsfiddle中正确地解决这个小问题,那对我来说意味着很多！ 🙂

最佳答案 你能试试吗？

    var $window = $(window);
var resized=false;
function checkWidth() {

    var windowsize = $window.width();
    if (windowsize > 440) {
        //if the window is greater than 440px wide then place the "inner" div after the 10th "test" div
        if(resized==false){
     $( '.inner:nth-child(10)' ).after( '<div class="test">');
            resized=true;
        }
    }
     if (windowsize <= 440) {
         $('.test').remove();
         resized=false;
     }
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);

这是你想要的吗？在您的版本中,resize函数多次调用.after(),添加了许多新的div.它应该这样工作

编辑：
有了@pete的建议,可以更容易地添加新的彩色div.

    var $window = $(window);

function checkWidth() {
    var windowsize = $window.width();
    if (windowsize > 440) {
        //if the window is greater than 440px wide then place the "inner" div after the 10th "test" div
        $('.test').remove();
     $( '.inner:nth-child(10)' ).after( '<div class="test">');
    }else{
        $('.test').remove();
    }
    if (windowsize > 500) {
        //if the window is greater than 440px wide then place the "inner" div after the 10th "test" div
        $('.test1').remove();
     $( '.inner:nth-child(12)' ).after( '<div class="test1">');
    }else{
         $('.test1').remove();
    }
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);

您只需要为test1类添加css规则.

点赞