Как завернуть элементы в блок? JS

Question

Подскажите пожалуйста, как завернуть элементы в блок, такого вида:

<li class="Level-3">
  <a href="#" class="Level-3-link link-none">Ссылка 1</a>
</li>
<li class="Level-3">
  <a href="#" class="Level-3-link">Ссылка 2</a>
</li>
<li class="Level-3">
  <a href="#" class="Level-3-link">Ссылка 3</a>
</li>
<li class="Level-3">
  <a href="#" class="Level-3-link">Ссылка 4</a>
</li>
<li class="Level-3">
  <a href="#" class="Level-3-link link-none">Ссылка 5</a>
</li>
<li class="Level-3">
  <a href="#" class="Level-3-link">Ссылка 6</a>
</li>
<li class="Level-3">
  <a href="#" class="Level-3-link">Ссылка 7</a>
</li>
<li class="Level-3">
  <a href="#" class="Level-3-link">Ссылка 8</a>
</li>
<li class="Level-3">
  <a href="#" class="Level-3-link link-none">Ссылка 9</a>
</li>

Нужно найти класс 'link-none' и до следующего 'link-none' завернуть все li в блок ul что бы получилось вот так:

<ul class="link-block">
  <li class="Level-3">
    <a href="#" class="Level-3-link link-none">Ссылка 1</a>
  </li>
  <li class="Level-3">
    <a href="#" class="Level-3-link">Ссылка 2</a>
  </li>
  <li class="Level-3">
    <a href="#" class="Level-3-link">Ссылка 3</a>
  </li>
  <li class="Level-3">
    <a href="#" class="Level-3-link">Ссылка 4</a>
  </li>
</ul>
<ul class="link-block">
  <li class="Level-3">
    <a href="#" class="Level-3-link link-none">Ссылка 5</a>
  </li>
  <li class="Level-3">
    <a href="#" class="Level-3-link">Ссылка 6</a>
  </li>
  <li class="Level-3">
    <a href="#" class="Level-3-link">Ссылка 7</a>
  </li>
  <li class="Level-3">
    <a href="#" class="Level-3-link">Ссылка 8</a>
  </li>
</ul>
<ul class="link-block">
  <li class="Level-3">
  <a href="#" class="Level-3-link link-none">Ссылка 9</a>
</li>
</ul>

пробавал что то типо такого, не знаю как дописать

$(".level-3").map(function() {
if($(".Level-3 a .link-none").lenght > 0){
  $(this).parent(".Level-3") - вот тут дальше не знаю как добавить блок <ul>
}
})

Answer 1

Как то так

var ul;

$(".Level-3").each(function(){
   if ($(this).find(".link-none").length>0) {
      ul = $("<ul>").addClass("link-block");
      ul.appendTo($(this).parent());
   }
   $(this).appendTo(ul);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<li class="Level-3">
  <a href="#" class="Level-3-link link-none">Ссылка 1</a>
</li>
<li class="Level-3">
  <a href="#" class="Level-3-link">Ссылка 2</a>
</li>
<li class="Level-3">
  <a href="#" class="Level-3-link">Ссылка 3</a>
</li>
<li class="Level-3">
  <a href="#" class="Level-3-link">Ссылка 4</a>
</li>
<li class="Level-3">
  <a href="#" class="Level-3-link link-none">Ссылка 5</a>
</li>
<li class="Level-3">
  <a href="#" class="Level-3-link">Ссылка 6</a>
</li>
<li class="Level-3">
  <a href="#" class="Level-3-link">Ссылка 7</a>
</li>
<li class="Level-3">
  <a href="#" class="Level-3-link">Ссылка 8</a>
</li>
<li class="Level-3">
  <a href="#" class="Level-3-link link-none">Ссылка 9</a>
</li>

БЛОГ НА HUSL

Как завернуть элементы в блок? JS

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