Javascript-форум - Jquery wrapAll(), unwrap()

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Jquery wrapAll(), unwrap() (https://javascript.ru/forum/events/70429-jquery-wrapall-unwrap.html)

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();

спасибо большое, все заработало )