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

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

Цитата:

Сообщение от рони
будет вам счастье

Ну, как минимум, не такой тупой как ты, уже счастье, можно сказать


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