ブラウザウィンドウの幅がxより大きい場合、新しいdivにdivを囲みます

Question

私は自分のサイトに実装したいと思っています。ブラウザウィンドウの幅がx以上になると、同義語<div><div>b。 （またはその他のHTML要素、つまり<span>）。

私はJavaScriptとjQueryのかなり基本的な知識があります。しかし、私はまだとにかくスクリプトを作成しようとしました。私はこのスクリプトで直面していた問題の

var windowWidth = $(window).width(); 

if(windowWidth > 1919){ 
    $(".navbar").wrap("<div class='center'></div>"); // center navbar 
} 

一つは、それが自動的にウィンドウの幅をチェックしないということです。

は、これは私がこれまで持っているものです。むしろ、ページがリフレッシュされた後にのみチェックします。

どうすればこの問題を回避できますか？

編集：私は自分のコードを更新しました。 1つの小さなことを除いて、すべてがうまくいきます。

私は幅以上1919pxであれば、それは他の複数のdiv秒でdivを囲みます、Chromeで私DOM Explorerを開くために行く

。この線に沿って

何か：

<div class="center"> 
    <div class="center"> 
     <div class="center"> 
      <div class="center"> 
       <!-- this will continue for ages until finally displaying the actual navbar div !--> 
       <div class="navbar"> 
        <!-- e.t.c. !--> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

私はjQueryのを少し更新することを決めた、と今では次のようになります。

$(window).on("resize", function(){ 
    if (window.matchMedia("(min-width: 1920px)").matches) { 
     $(".navbar").wrap("<div class='center'></div>"); 
    } else { 
     var content = $(".center").contents(); 
     $(".center").replaceWith(content); 
    } 
}).trigger("resize"); 

私は重複するからそれを停止する方法div要素を複数回使用しますか？

乾杯。

Answer 1

コードが正常に動作していて、自動的に呼び出されないという問題がある場合は、以下のコードでこの問題を解決する必要があります。ここでは、あなたのコードをウィンドウresizeイベントに添付して、それを一度起動して、ページの読み込み時に関数が自動的に1回実行されるようにしました。その後、ウィンドウのサイズが変更されるたびに呼び出されます。

句を追加しました。これは、ウィンドウの幅が選択した制限を下回った場合に.navbarをアンラップしたいと思うからです。これを使用するか、要件に応じて省略することができます。

$(window).on("resize", function(){ 
    var windowWidth = $(window).width(); 

    if(windowWidth > 1919){ 
    $(".navbar").wrap("<div class='center'></div>"); // center navbar 
    } 
    else{ 
    $(".navbar").unwrap('.center'); 
    } 
}).trigger("resize");//window resize 

Answer 2

$(window).resize(function() { 
    var windowWidth = $(window).width(); 

if(windowWidth > 1919){ 
    $(".navbar").wrap("<div class='center'></div>"); // center navbar 
} 
}); 

あなたがこれを使用することができます。

Answer 3

window.resize()は、このシナリオでは非効率的です。私はwindow.matchmedia()を使用して、あなたのロジックが何をすべきかをお勧めします。私はいつも特定の解像度が当たったときにのみブラウザがリサイズするときには起動しません。以下のドキュメントを読んでください。

MDN ; MatchMedia

サンプルイベントハンドラは以下の通りです。

var media = window.matchMedia("(min-width: 1919px)"); 

media.addListener(function(m)}{ 
    if(m.matches){ 
     $(".navbar").wrap("<div class='center'></div>"); 
    }else{ 
     //Remove the wrap 
    } 
}) 

Answer 4

div要素をラップするコードは一度実行する必要があります。ページ幅が既に必要な値より大きい場合は、すでにラップされているため、何もラップする必要はありません。

var isWrapped = false; 
$(window).on("resize", function(){ 
var windowWidth = $(window).width(); 

if(windowWidth > 1919 && !isWrapped){ 
$(".navbar").wrap("<div class='center'></div>"); // center navbar 
isWrapped = true; 
} 
else{ 
//remove wrapping div 
isWrapped = false; 
} 
}).trigger("resize");