Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Обернуть каждые 5 div (https://javascript.ru/forum/jquery/31784-obernut-kazhdye-5-div.html)

adax 20.09.2012 17:33
Обернуть каждые 5 div
 
Как обернуть список из 5 элементов еще одним DIV?

Т.е. есть список:

<div class="n1">...</div>
<div class="n2">...</div>
<div class="n3">...</div>
<div class="n4">...</div>
<div class="n5">...</div>
<div class="n6">...</div>
<div class="n7">...</div>
<div class="n8">...</div>
<div class="n9">...</div>
<div class="n10">...</div>
...
<div class="nn">...</div>


и чтоб в итоге получилось

<div>
<div class="n1">...</div>
<div class="n2">...</div>
<div class="n3">...</div>
<div class="n4">...</div>
<div class="n5">...</div>
</div>
<div>
<div class="n6">...</div>
<div class="n7">...</div>
<div class="n8">...</div>
<div class="n9">...</div>
<div class="n10">...</div>
</div>
...
<div>
<div class="nn-4">...</div>
<div class="nn-3">...</div>
<div class="nn-2">...</div>
<div class="nn-1">...</div>
<div class="nn">...</div>
<div>

walik 20.09.2012 18:53 
<!DOCTYPE HTML>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 
  </head>
  <body>
    <div class="elements">
      <div class="n1">...</div>
      <div class="n2">...</div>
      <div class="n3">...</div>
      <div class="n4">...</div>
      <div class="n5">...</div>
      <div class="n6">...</div>
      <div class="n7">...</div>
      <div class="n8">...</div>
      <div class="n9">...</div>
      <div class="n10">...</div>
    </div>
    <script>
      var $c = $('.elements');
      while($c.children('div:not(.wrap)').length)
        $c.children('div:not(.wrap):lt(5)').wrapAll('<div class="wrap">');
    </script>
  </body>
</html>

emptyindorill 01.09.2016 11:02
Жесть, изменил код под себя
var $c = $('.dropdown_2columns .level2');
    while($c.children('.dropdown_2columns .level2 > li:not(.wrap)').length)
    $c.children('.dropdown_2columns .level2 > li:not(.wrap):lt(3)').wrapAll('<div class="nav-column">');

И от него у меня виснет сайт)

ksa 01.09.2016 11:33
Цитата:
Сообщение от emptyindorill
И от него у меня виснет сайт
Тогда тестовый пример делай максимально приближенный к твоей ситуации...

scrollquest 01.09.2016 11:52 
<html>
<head>
<style>
 .foo{margin: 10px}
</style>
</head>
<body>
<div id = "container">
<div>foo</div>
<div>foo</div>
<div>foo</div>
<div>foo</div>
<div>foo</div>
<div>foo</div>
<div>foo</div>
<div>foo</div>
<div>foo</div>
<div>foo</div>
<div>foo</div>
<div>foo</div>
<div>foo</div>
<div>foo</div>
<div>foo</div>
<div>foo</div>
<div>foo</div>
<div>foo</div>
<div>foo</div>
<div>foo</div>
</div>
<script>
var re = /(<div[^>]*>[^<]*<\s*\/div\s*>\s*){5}/g
container.innerHTML = container.innerHTML.replace(re, `<div class = "foo">$&</div>`)
</script>


<body>
</html>

рони 01.09.2016 12:23
scrollquest,
всю обработку событий удалит ...

scrollquest 01.09.2016 12:25
рони,
Ты реально заебал своим тупняком. Ты где у ТСа обработку событий увидел?

рони 01.09.2016 12:27
emptyindorill,
если класс поменяли в 3 строке измените и в 2!!!
Цитата:
Сообщение от emptyindorill
li:not(.wrap)
на
Цитата:
Сообщение от emptyindorill
li:not(.nav-column)

рони 01.09.2016 12:28
scrollquest,
пишите безопасный код и будет вам счастье.

scrollquest 01.09.2016 12:42
рони,
Вас, видимо, в детстве головой об стенку частенько роняли. Может и манипуляции с домом запретить на этом основании? Висело событие на элементе, а ты этот элемент заменил чем то, хуяк, и нет события? А? Может нуенахуй вообще это жаваскрипт, отрисовал раз документ, и норм?

Цитата:
Сообщение от рони
будет вам счастье
Ну, как минимум, не такой тупой как ты, уже счастье, можно сказать

рони 01.09.2016 12:48
обернуть элементы на js
 
emptyindorill,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <style type="text/css">
li{
  padding:5px;
}
.nav-column {
  border: 1px solid Blue;
  margin: 3px;
  list-style: none;
}
  </style>
  <title></title>
<script>
document.addEventListener('DOMContentLoaded', fn, false);
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);
 });
}
function fn()
{
  wrapEach('.dropdown_2columns .level2>li','div',5,'nav-column');
}

</script>
</head>
<body>
<div class="dropdown_2columns">
    <ul class="level2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
    </ul>
</div>

</body>

</html>

dd_smol 01.09.2016 17:23
Еще как вариант. :)

jQuery(function ( $ ) {
	var $div = $('div');

	$div.each(function (i, el) {
		if ( i % 5 === 0 ) {
			$div.slice(i, i+5).wrapAll('<div />');
		}
	});
});

emptyindorill 15.02.2017 09:03
Цитата:
Сообщение от dd_smol (Сообщение 427417)
Еще как вариант. :)

jQuery(function ( $ ) {
	var $div = $('div');

	$div.each(function (i, el) {
		if ( i % 5 === 0 ) {
			$div.slice(i, i+5).wrapAll('<div />');
		}
	});
});
Спасибо большое.

Уже сколько времени прошло, и снова я в этой теме)
Помогло.


Часовой пояс GMT +3, время: 23:15.