Jquery wrapAll(), unwrap()
Ребят очень нужна ваша помощь. Мне нужно чтобы на разрешениях больше 768 мои блоки fc и fd оборочивались в соответствующие обертки. В чем сложность, мне нужно это делать при resize окна, сейчас на таком скрипте при сужении или расширении экрана, оберток добавляется нескончаемое число )
$(window).on('resize', function(){ if($(window).width() <= 768) { $('.advantages-item').unwrap(); } else{ $('.fd').wrapAll('<div class="advantages-wrap-left">'); $('.fc').wrapAll('<div class="advantages-wrap-right">'); } }).trigger('resize'); <section class="advantages"> <div class="wrapper"> <div class="advantages-container"> <div class="advantages-item fd"> <span class="icon icon-faucet"></span> <h5 class="h5">Business Philosophy</h5> <p class="advantages-item__text">lorem</p> </div> <div class="advantages-item fd"> <span class="icon icon-faucet"></span> <h5 class="h5">Innovation</h5> <p class="advantages-item__text"></p> <p class=" advantages-item--black__text"</p> </div> <div class="advantages-item fd"> <div class="advantages-item__img-wrap"> <img src="img/about-1.jpg" alt="alt"> </div> </div> <div class="advantages-item fc"> <span class="icon icon-faucet"></span> <h5 class="h5">Accessories</h5> <p class="advantages-item--blue__text"></p> <p class="advantages-item--blue__text"></p> </div> <div class="advantages-item fc"> <div class="vogt-numbers-item--about"> <div class="vogt-numbers item__number">8374</div> <p class="vogt-numbers-item__text"></p> </div> <div class="vogt-numbers-item vogt-numbers-item--about"> <div class="vogt-numbers-item__number">82K</div> <p class="vogt-numbers-item__text"></p> </div> <div class="vogt-numbers-item vogt-numbers-item--about"> <div class="vogt-numbers-item__number">6</div> <p class="vogt-numbers-item__text"></p> </div> </div> </div> </div> </section> |
window.matchMedia('(max-width: 768px)').addListener(function(e){ if(e.matches) { $('.advantages-item').unwrap(); } else{ $('.fd').wrap('<div class="advantages-wrap-left"></div>'); $('.fc').wrap('<div class="advantages-wrap-right"></div>'); } }) |
Спасибо за помощь, к сожалению с таким скриптом элементы fc и fd не берутся в обертки.
|
<html> <head> <style> .advantages-wrap-left, .advantages-wrap-right{ border: 1px solid red; } </style> </head> <body> <section class="advantages"> <div class="wrapper"> <div class="advantages-container"> <div class="advantages-item fd"> <span class="icon icon-faucet"></span> <h5 class="h5">Business Philosophy</h5> <p class="advantages-item__text">lorem</p> </div> <div class="advantages-item fd"> <span class="icon icon-faucet"></span> <h5 class="h5">Innovation</h5> <p class="advantages-item__text"></p> <p class=" advantages-item--black__text"</p> </div> <div class="advantages-item fd"> <div class="advantages-item__img-wrap"> <img src="img/about-1.jpg" alt="alt"> </div> </div> <div class="advantages-item fc"> <span class="icon icon-faucet"></span> <h5 class="h5">Accessories</h5> <p class="advantages-item--blue__text"></p> <p class="advantages-item--blue__text"></p> </div> <div class="advantages-item fc"> <div class="vogt-numbers-item--about"> <div class="vogt-numbers item__number">8374</div> <p class="vogt-numbers-item__text"></p> </div> <div class="vogt-numbers-item vogt-numbers-item--about"> <div class="vogt-numbers-item__number">82K</div> <p class="vogt-numbers-item__text"></p> </div> <div class="vogt-numbers-item vogt-numbers-item--about"> <div class="vogt-numbers-item__number">6</div> <p class="vogt-numbers-item__text"></p> </div> </div> </div> </div> </section> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> window.matchMedia('(max-width: 768px)').addListener(function(e){ if(e.matches) { $('.advantages-item').unwrap(); } else{ $('.fd').wrap('<div class="advantages-wrap-left"></div>'); $('.fc').wrap('<div class="advantages-wrap-right"></div>'); } }) </script> </body> </html> а у меня работает, чудеса да? :) |
https://codepen.io/anon/pen/Mvxzwm
вот, подергайте экран, ато тут не видно. |
Вы извините я наверно неправильно объяснил проблему свою. Я там выше первый пост поправил. И мне нужно, чтобы к примеру для трех блоков fc создавалась одна обертка, а не 3 для каждой. Я попробовал метод wrapAll(), но теперь при resize окна оберток создается бесконечность.
|
function resize(){ if($(window).width() <= 768) { $('.advantages-item').unwrap(); } else{ $('.fd').wrapAll('<div class="advantages-wrap-left"></div>'); $('.fc').wrapAll('<div class="advantages-wrap-right"></div>'); } } window.matchMedia('(max-width: 768px)').addListener(function(e){ if(e.matches) resize(); else resize(); }) resize(); Тогда так |
Почти то, что нужно. Но почему-то удаляется секция .advantages-container, её нужно на месте оставлять.
|
function resize(){ if($(window).width() <= 768) { $('.advantages-wrap-left, .advantages-wrap-right').contents().unwrap(); } else{ $('.fd').wrapAll('<div class="advantages-wrap-left"></div>'); $('.fc').wrapAll('<div class="advantages-wrap-right"></div>'); } } window.matchMedia('(max-width: 768px)').addListener(function(e){ if(e.matches) resize(); else resize(); }) resize(); |
спасибо большое, все заработало )
|
Часовой пояс GMT +3, время: 14:25. |