Добавить div перед ul с помощью js

Question

Есть на странице несколько тегов . Их можно описать в css как li ul.children Нужно сделать спойлеры перед ними. Есть мысль реализовать задумку следующим образом.

Из этого:

<ul>
    <li class="cat-item cat-item-26"><a href="26">Title</a> (9) </li>
    <ul class="children">
        <li class="cat-item cat-item-27"><a href="27">Title</a> (3) </li>
        <li class="cat-item cat-item-28"><a href="28">Title</a> (3) </li>
        <li class="cat-item cat-item-29"><a href="29">Title</a> (3) </li>
    </ul>
    <li class="cat-item cat-item-36"><a href="36">Title</a> (9) </li>
    <ul class="children">
        <li class="cat-item cat-item-37"><a href="37">Title</a> (3) </li>
        <li class="cat-item cat-item-38"><a href="38">Title</a> (3) </li>
        <li class="cat-item cat-item-39"><a href="39">Title</a> (3) </li>
    </ul>
</ul>

Нужно сделать что то типа такого:

<ul>
    <li class="cat-item cat-item-26"><a href="26">Title</a> (9) </li>
    <div class="toogle-children-1"></div>
    <ul class="children-1">
        <li class="cat-item cat-item-27"><a href="27">Title</a> (3) </li>
        <li class="cat-item cat-item-28"><a href="28">Title</a> (3) </li>
        <li class="cat-item cat-item-29"><a href="29">Title</a> (3) </li>
    </ul>
    <li class="cat-item cat-item-36"><a href="36">Title</a> (9) </li>
    <div class="toogle-children-2"></div>
    <ul class="children-2">
        <li class="cat-item cat-item-37"><a href="37">Title</a> (3) </li>
        <li class="cat-item cat-item-38"><a href="38">Title</a> (3) </li>
        <li class="cat-item cat-item-39"><a href="39">Title</a> (3) </li>
    </ul>
</ul>

Перед каждым из них добавить div (он будет таким себе переключателем).

При нажатии на который в ul добавим высоту , а при повторном нажатии на этот же div наш ul снова станет

А теперь главный вопрос: как такое сделать на js или jquery? ))) Причем для нескольких на одной и той же странице.

Answer 1

Так Вы хотели?

$('ul').each(function(){
if($(this).children('ul').length){
$(this).find('ul').before('<span class="toogle-children-1">span, а не div внутри ul, nigga</span>');
}

});

ul li{color:red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li class="cat-item cat-item-26"><a href="26">Title</a> (9) </li>
    <ul class="children">
        <li class="cat-item cat-item-27"><a href="27">Title</a> (3) </li>
        <li class="cat-item cat-item-28"><a href="28">Title</a> (3) </li>
        <li class="cat-item cat-item-29"><a href="29">Title</a> (3) </li>
    </ul>
    <li class="cat-item cat-item-36"><a href="36">Title</a> (9) </li>
    <ul class="children">
        <li class="cat-item cat-item-37"><a href="37">Title</a> (3) </li>
        <li class="cat-item cat-item-38"><a href="38">Title</a> (3) </li>
        <li class="cat-item cat-item-39"><a href="39">Title</a> (3) </li>
    </ul>
</ul>

Answer 2

Обратите внимание на верстку, т.к. я ее переделал.

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

let showButtons = document.querySelectorAll('.toggle_additional-list');
let tempEl;


for (const showButton of showButtons) {
  showButton.addEventListener('click', (ev) => {
    if (tempEl) {
      tempEl.classList.remove('show');
    }
    let el = ev.target;
    tempEl = el.nextElementSibling;
    tempEl.classList.add('show');
  });
}

.toggle_additional-list~ul {
  display: none
}

.show {
  display: block !important;
}

<ul>
  <li class="cat-item cat-item-26">
    <a href="26">Title</a> (9) <span class="toggle_additional-list"> ▼ </span>
    <ul class="additional-list dchildren-1">
      <li class="cat-item cat-item-27"><a href="27">Title</a> (3) </li>
      <li class="cat-item cat-item-28"><a href="28">Title</a> (3) </li>
      <li class="cat-item cat-item-29"><a href="29">Title</a> (3) </li>
    </ul>
  </li>
  <li class="cat-item cat-item-36">
    <a href="36">Title</a> (9) <span class="toggle_additional-list"> ▼ </span>
    <ul class="additional-list children-2">
      <li class="cat-item cat-item-37"><a href="37">Title</a> (3) </li>
      <li class="cat-item cat-item-38"><a href="38">Title</a> (3) </li>
      <li class="cat-item cat-item-39"><a href="39">Title</a> (3) </li>
    </ul>
  </li>
</ul>

Answer 3

Спасибо Вам за помощь. Объединил два ответа, получилось то что нужно. Пример выкладываю здесь, может кому нибудь пригодится

    <html><head>
    <style>
        .spoiler-cat {
            position: absolute;
            left: 1.6rem;
            width: 12px;
            margin-top: -1.35em;
            color: rgb(0 0 0 / 50%);
            cursor: help;
            background: aqua;
        }
        
        .spoiler-cat~ul {
          display: none
        }
        .spoiler-cat-show {
          display: block !important;
        }
    </style>
</head>
<body>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<ul>
    <li class="cat-item cat-item-26"><a href="26">Title</a> (9)
        <ul class="children">
            <li class="cat-item cat-item-27"><a href="27">Title</a> (3) </li>
            <li class="cat-item cat-item-28"><a href="28">Title</a> (3) </li>
            <li class="cat-item cat-item-29"><a href="29">Title</a> (3) </li>
        </ul>
    </li>
    <li class="cat-item cat-item-36"><a href="36">Title</a> (9)
        <ul class="children">
            <li class="cat-item cat-item-37"><a href="37">Title</a> (3) </li>
            <li class="cat-item cat-item-38"><a href="38">Title</a> (3) </li>
            <li class="cat-item cat-item-39"><a href="39">Title</a> (3) </li>
        </ul>
    </li>
</ul>


    <script type="text/javascript">
        $('li').each(function(){
            if($(this).children('ul').length){
                $(this).find('ul.children').before('<div class="spoiler-cat">+</div>');
            }
        });
        
        let showButtons = document.querySelectorAll('.spoiler-cat');
        let tempEl;
        for (const showButton of showButtons) {
          showButton.addEventListener('click', (ev) => {
            if (tempEl) {
              tempEl.classList.remove('spoiler-cat-show');
            }
            let el = ev.target;
            tempEl = el.nextElementSibling;
            tempEl.classList.add('spoiler-cat-show');
          });
        }
    </script>

</body></html>

БЛОГ НА HUSL

Добавить div перед ul с помощью js

Ответы (3 шт):