-2

ビューアのブラウザの幅に基づいて、他のdivの後にdivを追加できるjQuery内の簡単なメソッドを見つけました。したがって、ブラウザの幅が500pxを超える場合は、30番目の「内部」divの後に「test5」divを挿入するようにブラウザに指示します。次に、ブラウザの幅が500px未満の場合は、このdivを削除するように指示します。また、これを複数のdivで機能させるため、ブラウザの幅が500px未満の場合、30番目の「内側」のdivの後に配置された元のdivが非表示になり、さらに4つのdiv（test、test2、test3、test4）が表示されます。だから私はこのすべてを複数のdivで動作させました。これは素晴らしい。

今のところ、nth-child指定したブラウザ幅ごとにdivの位置を変更したいと思います。したがって、今やらなければならない方法は、ある幅に5 divを挿入し、別の幅に非表示にし、別の幅に別の5 divを挿入し、別の幅に非表示にするというようになります。常に5つのdivを追加してから、ブラウザーの幅ごとに非表示にするのではなく、ブラウザーの幅ごとにn番目の子の位置を変更したいと思います。これが私の古いコードです。この例では、5 divを使用していることに注意してください。1つはブラウザの幅が500pxを超えると表示され、4つのdivはブラウザの幅が500px未満のときに表示されます。

古いコードは次のとおりです。

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です（divが表示されて消えるのを確認するには、HTMLウィンドウのサイズを変更する必要があります）。

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

ブラウザの幅の変更時にdivを非表示にしたり、新しいものを追加したりしない方法を考え出したいのですが、代わりに、nth-child指定したブラウザの幅ごとにdivを再配置するだけです。これをどのように行うかはわかりませんが、jsfiddleと同様に、どのように機能すると思うかについての開始ベースのjqueryコードを次に示します。これは、例として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/

つまり、簡単に要約すると、次のようになります。

n番目の子を介して他のdivの後に配置されているdivがあり、ビューアのブラウザの幅に基づいて表示および非表示になります。現時点では、n番目の子を介してdivを正しい場所に配置し（これで問題ありません）、解決のためにdivを非表示にしてから、新しいものを再表示する必要があります。このプロセスをすべてのブラウザー幅に対して繰り返す必要があります/解像度。私はそれを作りたいので、n番目の子を介してこのdivを挿入します（私が今しているように）が、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 に答える