группировать элементы с классом A, которому предшествует элемент с классом B

Question

Я пытаюсь сгруппировать теги li с классом «sub» в контейнер (), только если перед ними есть элемент, содержащий «заголовок» класса. Мне удалось обернуть все последовательные элементы с помощью «подпрограммы» в «контейнер», но по-прежнему нужно игнорировать первые группы подпрограмм, поскольку перед ними нет класса «заголовок».

$('.sub').not('.sub+.sub').each(function(){
  $(this).nextUntil(':not(.sub)').addBack().wrapAll('<div class="container" />');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li class="sub">...</li>
    <li class="sub">...</li>
    <li class="sub">...</li>
    <li class="sub">...</li>
    <li class="title">Title</li>
    <li class="sub">...</li>
    <li class="sub">...</li>
    <li class="sub">...</li>
    <li class="sub">...</li>
    <li class="title">Title</li>
    <li class="sub">...</li>
    <li class="sub">...</li>
    <li class="sub">...</li>
    <li class="sub">...</li>
  </ul>

Есть ли способ сгруппировать только те элементы, которым предшествует элемент с классом «title»? также учитывая, что может быть несколько UL, как в примере

Answer 1

1. Поиск по заголовку
2. Найти все элементы после заголовка, не включая следующий заголовок
3. Обернуть их все контейнером div

$('.title').each(function(){
  $(this).nextUntil('.title').wrapAll('<div class="container">');
});

.container { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li class="sub">...</li>
    <li class="sub">...</li>
    <li class="sub">...</li>
    <li class="sub">...</li>
    <li class="title">Title</li>
    <li class="sub">...</li>
    <li class="sub">...</li>
    <li class="sub">...</li>
    <li class="sub">...</li>
    <li class="title">Title</li>
    <li class="sub">...</li>
    <li class="sub">...</li>
    <li class="sub">...</li>
    <li class="sub">...</li>
  </ul>