Javascript-форум - Создание списка новго ul списка в нутри ul

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Создание списка новго ul списка в нутри ul (https://javascript.ru/forum/jquery/73972-sozdanie-spiska-novgo-ul-spiska-v-nutri-ul.html)

Создание списка новго ul списка в нутри ul

Здравствуйте, допустим есть некий список с вложенностью

<ul class="spisok">
<li>1</li>
<li>2</li>
<li>3</li>
<li class="subspisok">4<ul>
<li>4.1</li>
<li>4.2</li>
<li>4.3</li>
<li>4.4</li>
<li>4.5</li>
<li>4.6</li>
<li>4.7</li>
<li>4.8</li>
</ul>
</li>
<li class="subspisok">5<ul>
<li>5.1</li>
<li>5.2</li>
<li>5.3</li>
<li>5.4</li>
....
<li>5.11</li>
</ul></li>
<li>6</li>
<li>7</li>
</ul>

Необходимо после каждого 3 элемента вложенного списка создавать дополнительную вложенность, т.е. что бы было примерно так

<ul class="spisok">
<li>1</li>
<li>2</li>
<li>3</li>
<li class="subspisok">4<ul>
<li>4.1</li>
<li>4.2</li>
<li>4.3<ul>
<li>4.4</li>
<li>4.5</li>
<li>4.6<ul>
<li>4.7</li>
<li>4.8</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="subspisok">5<ul>
<li>5.1</li>
<li>5.2</li>
<li>5.3<ul>
<li>5.4</li>
....<ul><li>5.11</li>
</ul>
</ul>
</li>
</ul>
</li>
<li>6</li>
<li>7</li>
</ul>

чтобы после каждого n-го элемента что-то вставить, я использую функцию

$("ul li.subspisok li:nth-child(3n)").after("текст")

но конкретно со списком у меня что-то не получается, подскажите в каком направлении смотреть

Цитата:

Сообщение от snut8

после каждого n-го элемента что-то вставить

В списке после элемента списка можно вставить еще один элемент списка...

А вот в сам элемент списка можно вставлять много чего. ;)

можно подробнее, не очень понял

snut8,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css"></style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
    $(".subspisok ul").each(function(i, ul) {
        $("li", ul).each(function(i, li) {
            $(li).appendTo(ul);
            ++i % 3 || (ul = $("<ul>").appendTo(li))
        })
    })
});
  </script>
</head>
<body>
  <ul class="spisok">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li class="subspisok">4
      <ul>
        <li>4.1</li>
        <li>4.2</li>
        <li>4.3</li>
        <li>4.4</li>
        <li>4.5</li>
        <li>4.6</li>
        <li>4.7</li>
        <li>4.8</li>
      </ul>
    </li>
    <li class="subspisok">5
      <ul>
        <li>5.1</li>
        <li>5.2</li>
        <li>5.3</li>
        <li>5.4</li>....
        <li>5.11</li>
      </ul>
    </li>
    <li>6</li>
    <li>7</li>
  </ul>
</body>
</html>

спасибо, всё работает, а то уже весь день сижу и думаю над этим:dance:

не подскажешь как модернизировать скрипт что бы ul вставлялся не в последний li а на уровне предыдущего li, т.е. что бы в конечном итоге было так

<li class="subspisok">
      <ul>
        <li>5.1</li>
        <li>5.2</li>
        <li>5.3</li>
</ul>
<ul>
        <li>5.4</li>
        <li>5.11</li>
      </ul>
    </li>

snut8,

++i % 3 || (ul = $("<ul>").insertAfter(ul))

Цитата:

Сообщение от рони (Сообщение 486508)

snut8,

++i % 3 || (ul = $("<ul>").insertAfter(ul))

огромное спасибо, вы действительно профессионал!:)