4

我有 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 中正常工作，那对我来说意义重大！:)

4

2 回答 2

2

你能试试这个吗？

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

于 2013-02-05T09:07:16.310 回答
0

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

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

于 2013-02-05T09:28:32.590 回答