Попарное обертывание элементов ?
Добрый день уважаемые, подскажите пожалуйста самый простой способ как попарно обернуть элементы ? https://jsfiddle.net/3zaL2muw/ Как оборачивать параграфы .game_symbols и следующий за ним элемент в див game_symbols__wrapper, в независимости от того что это за элемент. Я пробовал через .next() но чёт не сработало
|
symbolsName = $(".game_symbols")
symbolsName.each(function(){
$(this).add($(this).next()).wrapAll('<div class="game_symbols__wrapper"></div>');
});
|
обернуть попарно
:write:
из былого ... обернуть элементы на js
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css"> .game_symbols__wrapper{
width: 100%;
border: 1px solid #f00;
margin-bottom: 10px;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
function wrapEach(element, wrapper, countToWrap, cls){
var container;
[].forEach.call( document.querySelectorAll(element), function(el,i) {
i % countToWrap || (container = document.createElement(wrapper),
cls && container.classList.add(cls),
el.parentNode.replaceChild(container,el));
container.appendChild(el);
});
}
wrapEach('.game_symbols, .game_symbols + *','div',2,'game_symbols__wrapper');
})
</script>
</head>
<body>
<p class="game_symbols">text1</p>
<div class="block">dsfsdfsdfdsf</div>
<p class="game_symbols">text2</p>
<div class="ggg">Lorem ipsum dolor sit amet.</div>
<p class="game_symbols">text3</p>
<div class="feew">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, obcaecati.</div>
<p class="game_symbols">text4</p>
<button>кнопка</button>
<p class="game_symbols">text5</p>
<a href="">link</a>
</body>
</html>
|
:write: на всякий случай ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css"> .game_symbols__wrapper{
width: 100%;
border: 1px solid #f00;
margin-bottom: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".game_symbols").each(function(i, e){
$(e).add("+", e).wrapAll('<div class="game_symbols__wrapper"></div>');
});
});
</script>
</head>
<body>
<p class="game_symbols">text1</p>
<div class="block">dsfsdfsdfdsf</div>
<p class="game_symbols">text2</p>
<div class="ggg">Lorem ipsum dolor sit amet.</div>
<p class="game_symbols">text3</p>
<div class="feew">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, obcaecati.</div>
<p class="game_symbols">text4</p>
<button>кнопка</button>
<p class="game_symbols">text5</p>
<a href="">link</a>
</body>
</html>
|
Круто, спасибо :thanks:
|
| Часовой пояс GMT +3, время: 03:16. |