jQuery：根据浏览器宽度更改 div 位置答案

【问题标题】：jQuery: changing div placement based on browser widthjQuery：根据浏览器宽度更改 div 位置
【发布时间】：2013-02-05 17:56:06
【问题描述】：

我有 28 个 div，全部向左浮动，宽度和高度为 200 像素，每个 div 的右侧和底部有 5 像素的边距。我已经成功地弄清楚了如何通过 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);

所以当查看者浏览器宽度超过 440 像素时，我告诉我的浏览器在第 10 个“测试”div 之后显示 div“内部”。同样，这在某种程度上有效。当浏览器宽度超过 440px 时，它成功地在正确位置显示“内部”div，当浏览器宽度低于 440px 时，它也不显示 div。但最大的问题是，每当调整窗口大小时，就会开始创建一大堆 div。这对我来说非常令人费解。这是演示我的问题的 jsFiddle：

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

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

如果有人可以帮助我解决这个问题并让这个小问题在 jsfiddle 中正常工作，那对我来说意义重大！ :)

【问题讨论】：

请注意，在您使用的checkWidth 方法中：var windowSize = $window.width(); 那应该是var windowSize = $(window).width();（您错过了window 周围的括号：）
每次调整窗口大小时，它都会调用您的 checkwidth 方法，并且由于您没有测试是否已经创建了 div，它只会重新创建它们。
谢谢Pete，我还不太擅长jquery，我不知道如何解决您的评论。如果你能提供一个 jsfiddle 的答案来解决我的问题，那就太棒了。谢谢你通知我。
你可以在函数的开头调用类似$('.inner').remove()的东西，这样它就会在创建新的div之前先删除任何以前的div

标签： jquery resize css-selectors

【解决方案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 规则。

【讨论】：

这肯定会否定调整大小的功能，因为它只会在调整窗口大小时触发一次，然后再也不会触发，因此您不会获得最终的窗口大小
Pete，对我来说一切似乎都很好：jsfiddle.net/EUqEm/8 如果您发现任何错误，请告诉我。
实际上它是在窗口大小从 440 之后再次调用的。如果我得到了 Dyck 想要的东西，这就是它需要做的一切。
@CosLu 嘿，伙计，我正在努力让它工作，以便我可以做多种浏览器尺寸..所以如果浏览器端超过 440px，我想在一个位置显示一个 div 然后插入当浏览器超过 740 像素时，另一个位于不同位置的 div。我在这里尝试过：jsfiddle.net/EUqEm/9 但由于某种原因它不起作用。你认为你可以让 jsfiddle 在不同浏览器宽度的多个 div 位置上正常工作吗？这将是惊人的！！！ :)
@Dyck 这是因为您共享相同的控制变量。如果要添加另一个彩色 div，只需添加并重复相同的操作。 jsfiddle.net/EUqEm/23（在这个例子中我添加了 500px 而不是 740 只是为了测试）

【解决方案2】：

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

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

【讨论】：