Форум

komned37 · #1 (**permalink**) 23.07.2018, 11:38

Добрый день!
Помогите решить следующую задачу:
имеется контейнер с вложенными в него блоками

<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>

j0hnik · #2 (**permalink**) 23.07.2018, 12:33

<!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>

j0hnik · #3 (**permalink**) 23.07.2018, 12:58

<!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>

Alexandroppolus · #4 (**permalink**) 23.07.2018, 13:34

стер пыль с этих ваших ренджей и документФрагментов )

минимум перестановок в дереве:
http://jsfiddle.net/alexandroppolus/n9psfbrj/

в старые добрые времена эти трюки давали оптимизацию, как сейчас - не знаю..

komned37 · #5 (**permalink**) 23.07.2018, 16:26

всем спасибо, все предложенные методы отличноработают

рони · #6 (**permalink**) 23.07.2018, 17:25

Alexandroppolus,

рони · #7 (**permalink**) 23.07.2018, 17:27

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>

Форум

Справочник

Discord чат

Курсы javascript