javascript - 将具有 A 类的项目分组，其前面是具有 B 类的元素

Question

我试图将带有类“sub”的li标签分组到一个容器（）中，前提是它们之前有一个包含类“title”的元素。我能够将所有带有“sub”的连续元素包装到一个“容器”中，但仍然需要忽略第一组 subs，因为它们之前没有“title”类。

$('.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，例如示例中的那个

标签： javascriptjquery

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>