4

私は 28 個の div を持っています。すべて左にフロートし、幅と高さは 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);

したがって、ビューアのブラウザ幅が 440px を超えると、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);

これはあなたが望んでいたものですか？あなたのバージョンでは、サイズ変更関数が .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 に答える