使用jquery，从更大的兄弟组中提取每组相邻的兄弟，匹配选择器

Posted 2023-05-09

【中文标题】使用jquery，从更大的兄弟组中提取每组相邻的兄弟，匹配选择器

【英文标题】：Using jquery, extract each group of adjacent siblings, matching selector, from a larger group of siblings

【发布时间】：2020-09-18 13:18:59

【问题描述】：

我有以下标记：

<div id="parent">
    <div class="special child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="special child"></div>
    <div class="special child"></div>
    <div class="special child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

我需要做的是提取 div.special 的 2 个子集合（用于 2 组相邻的兄弟姐妹），然后用另一个父级包装每个组，最终得到：

<div id="parent">
    <div class="special_parent">
        <div class="special child"></div>
    </div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="special_parent">
        <div class="special child"></div>
        <div class="special child"></div>
        <div class="special child"></div>
    </div>
    <div class="child"></div>
    <div class="child"></div>
</div>

我可以从迭代兄弟元素开始并做一些繁重的工作，但我认为应该有更优雅的方法。

【参考方案1】：

使用each() 和nextUntil()

$('.special').each(function() 
  if ($(this).parent().hasClass('special_parent')) return
  $(this)
    .nextUntil(':not(.special)')
    .add(this)
    .wrapAll('<div class="special_parent">')
)

.special_parent 
  color: red;

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

<div id="parent">
  <div class="special child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="special child">5</div>
  <div class="special child">6</div>
  <div class="special child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
  <div class="special child">10</div>
  <div class="special child">11</div>
</div>

【讨论】：

谢谢@User863。看起来体面。让我花点时间检查一下。