Форум

snut8 · #1 (**permalink**) 01.06.2018, 16:15

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

<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("текст")

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

ksa · #2 (**permalink**) 01.06.2018, 16:28

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

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

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

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

snut8 · #3 (**permalink**) 01.06.2018, 16:50

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

рони · #4 (**permalink**) 01.06.2018, 16:53

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>

snut8 · #5 (**permalink**) 01.06.2018, 17:05

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

snut8 · #6 (**permalink**) 01.06.2018, 17:56

не подскажешь как модернизировать скрипт что бы 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>

рони · #7 (**permalink**) 01.06.2018, 18:01

snut8,

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

snut8 · #8 (**permalink**) 01.06.2018, 22:35

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

snut8,

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

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

Форум

Справочник

Discord чат

Курсы javascript