Попарное объединение соседних блоков
Добрый день!
Помогите решить следующую задачу: имеется контейнер с вложенными в него блоками
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
...
</div>
как попарно объединить их и затолкать в общий контейнер чтоб получилось так:
<div class="container">
<div class="item-box">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="item-box">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="item-box">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="item-box">
<div class="item"></div>
<div class="item"></div>
</div>
....
</div>
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
<script>
$('.item:nth-child(odd)').each(function(){
$(this).add($(this).next()).wrapAll('<div class="item-box"></div>');
});
</script>
</body>
</html>
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
<script>
[].forEach.call(document.querySelectorAll('.item:nth-child(odd)'),function(el,i){
el.insertAdjacentHTML('beforebegin', '<div class="item-box"></div>');
var wrap = document.querySelectorAll('.item-box')[i];
var next = el.nextElementSibling;
wrap.appendChild(el);
wrap.appendChild(next);
});
</script>
</body>
</html>
|
стер пыль с этих ваших ренджей и документФрагментов )
минимум перестановок в дереве: http://jsfiddle.net/alexandroppolus/n9psfbrj/ в старые добрые времена эти трюки давали оптимизацию, как сейчас - не знаю.. |
всем спасибо, все предложенные методы отличноработают
|
Alexandroppolus,
:thanks: |
komned37,
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div {
padding: 5px 5px 0 5px;
margin-bottom: 5px;
min-height: 20px;
}
.container {
border: 2px solid red;
}
.item-box {
border: 2px solid green;
}
.item {
background: blue;
}
</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('.item','div',2,'item-box');
})
</script>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 11:39. |