我可以使用jQuery .wrap或.wrapInner来包装一组不同的元素吗？

Question

我有一个像这样的HTML结构：

<section>
  <item>
    <ele class="blue" />
    <ele class="green" />
    <ele class="red" />
  </item>
  <item>
    <ele class="blue" />
    <ele class="green" />
    <ele class="red" />
  </item>
  <item>
    <ele class="blue" />
    <ele class="green" />
    <ele class="red" />
  </item>
</section>

我需要将每个<item>中的第二个两个元素包装在一个新div中，以便它看起来如下所示：

<item>
  <ele class="blue" />
  <div class="extra-wrapper">
    <ele class="green" />
    <ele class="red" />
  </div>
</item>

有可能使用任何jQuery wrap函数来实现这一目标吗？或者是否有另一种方法，无需过滤每个项目，找到匹配的元素，构建一个新的HTML字符串并将它们放回去？

Answer 1

要做到这一点，你可以遍历每个qazxsw poi元素，获得以下所有兄弟姐妹，并在它们上面调用qazxsw poi，如下所示：

.blue

wrapAll()

$('.blue').each(function() {
  $(this).nextAll().wrapAll('<div class="extra-wrapper"></div>');
});

请注意，我将

.extra-wrapper {
  border: 1px solid #C00;
}

和

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div>
    <div class="blue">blue</div>
    <div class="green">green</div>
    <div class="red">red</div>
  </div>
  <div>
    <div class="blue">blue</div>
    <div class="green">green</div>
    <div class="red">red</div>
  </div>
  <div>
    <div class="blue">blue</div>
    <div class="green">green</div>
    <div class="red">red</div>
  </div>
</section>

元素更改为div，因为它们是非标准的。