Question

我有28个div，左边都有一个宽度＆amp;高度为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);

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

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

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

如果有人可以帮助我解决这个问题，并在jsfiddle中正确地解决这个小问题，那对我来说意义重大！：）

Answer 1

你能试试吗？

    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规则。

Answer 2

我认为问题可能是您的解决方案没有状态。它不知道您是否正在转换到低于440的宽度，或者您是否已经比这更窄。因此，每次调整大小时都会添加另一个div。对于这个简单的用例，我建议在添加测试div之前检查它是否存在。

不确定它是否符合您的要求，但如果宽度大于440，则可能值得删除测试div。

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

2 个答案: