-2

我在 jQuery 中找到了一个简单的方法，它允许我根据查看者的浏览器宽度在其他 div 之后添加 div。所以我要做的是告诉浏览器在第 30 个“内部”div 之后插入“test5”div，如果浏览器宽度超过 500px。如果浏览器宽度小于 500px，我也会告诉它删除这个 div。我还使用多个 div 进行了此操作，因此当浏览器宽度小于 500 像素时，它会隐藏放置在第 30 个“内部”div 之后的原始 div，然后再显示四个 div（test、test2、test3 和 test4）。所以我让整个事情与多个 div 一起工作。这很棒。

现在，我想nth-child为每个指定的浏览器宽度更改 div 的位置。所以我现在必须这样做的方法是为一个宽度插入 5 个 div，为另一个宽度隐藏它们，为另一个宽度插入另外 5 个 div，为另一个宽度隐藏它们等等。与其不断添加 5 个 div，然后为每个不同的浏览器宽度隐藏它们，我只想为不同的浏览器宽度更改第 n 个子项的位置。所以这是我的旧代码.. 请注意，对于这个例子，我只使用 5 个 div，当浏览器宽度超过 500px 时显示 1 个，然后当浏览器宽度小于 500px 时显示 4 个 div..

这是旧代码：

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

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

if (windowsize > 500) {
    if(resized500==false){
 $( '.inner:nth-child(30)' ).after( '<div class="test3">');
        resized500=true;
    }
}
 if (windowsize >= 500) {
     $('.test, .test2').remove();
     resized=false;
 }
if (windowsize <= 500) {
     $('.test3').remove();
     resized500=false;
 }
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);

这是用于演示此代码的旧 jsfiddle（您必须调整 HTML 窗口的大小才能看到 div 出现和消失）：

http://jsfiddle.net/EUqEm/72/

我想提出一种方法，它不会隐藏 div 或在浏览器宽度更改时添加新的，而是我希望它只nth-child为每个指定的浏览器宽度重新定位 div。我不确定我会如何做到这一点，但这里是一个起始的基本 jquery 代码，我认为它可能如何工作，以及一个 jsfiddle。出于示例目的，这是使用 3 个浏览器宽度。

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

var windowsize = $window.width();
if (windowsize > 440 && windowsize < 500) {
    //if the window is in between the sizes of 440 and 500px
    if(resized==false){
   $( '.inner:nth-child(5)' ).after( '<div class="test">');
   $( '.inner:nth-child(10)' ).after( '<div class="test2">');
   $( '.inner:nth-child(12)' ).after( '<div class="test3">');
   $( '.inner:nth-child(15)' ).after( '<div class="test4">');
        resized=true;
    }
}

if (windowsize > 500 && windowsize < 600) {
    //if the window is in between the sizes of 500 and 600px
    if(resized500==false){

 // code that repositions all four test divs up one number (5 to 6, 10 to 11, etc.)
        resized500=true;

    }
}

if (windowsize > 600 && windowsize < 700) {
    //if the window is in between the sizes of 600 and 700px
    if(resized600==false){

 // code that repositions all four test divs up one number again.(6 to 7, 11 to 12, etc.)
        resized600=true;

    }
}

}

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

这是这个早期基本代码的 jsFiddle（由于没有为各种浏览器宽度设置值，因此不能完全工作）：

http://jsfiddle.net/EUqEm/73/

所以只是快速回顾一下：

我有通过 nth-child 放置在其他 div 之后的 div，这些 div 根据查看者浏览器的宽度出现和消失。目前，我必须通过 nth-child 将 div 放置在正确的位置（这很好），然后使 div 消失以获取分辨率，然后重新出现新的，我必须对所有浏览器宽度重复此过程/决议。我想这样做，所以我通过 nth-child 插入这个 div（就像我现在正在做的那样）但不必隐藏 div 并为每个浏览器宽度显示新的，我希望能够改变不同浏览器宽度的第 n 个子位置。

如果有人知道此问题的解决方案，请随时留下答案，甚至可以使用有效的 jsFiddle 演示。:)

4

1 回答 1

1

我已将您的代码更改为使用包含元素的对象和一个函数，该函数通过在正确的位置创建一个新元素并删除当前div元素来更改元素值。nth-childdiv

这是divs的对象：

var theDivs={
    "div1":$("<div />").addClass("test"),
    "div2":$("<div />").addClass("test2"),
    "div3":$("<div />").addClass("test3"),
    "div4":$("<div />").addClass("test4")
};

这是功能：

function setNthPosition(theDiv,newPos){
    //Clone the specific div
    var theClone=theDivs["div"+theDiv].clone();

    //Replace the nth div with the clone
    $("#wrapper div:nth-child("+newPos+")").replaceWith(theClone);  
}

此外，您的resized布尔检查设置不正确，所以我只是将它们注释掉。

这是完整的 JsFiddle：http: //jsfiddle.net/EUqEm/85/

于 2013-02-06T17:30:19.930 回答