如何将H2与特定类和接下来的两个元素包装在包装班级中

Question

我有一个一致的标记段，我想与一堂课 .wrapAll。我正在尝试识别<h2>和接下来的两个元素。

在此片段之前和之后不一致的元素，因此我不能将.next使用到下一个<h2>等，但是<h2>上的.UniqueClass是我认为我可以关键的东西吗？

我已经尝试了以下内容，但它不起作用。
如何将<h2>，<p>和div.accordion包装在一个类中？

var $set = $('h2.uniqueClass').children();
for (var i = 0, len = $set.length; i < len; i += 2) {
  $set.slice(i, i + 2).wrapAll('<div class="test"/>');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class "uniqueClass">Headline</h2>
<p>A p tag always follows.</p>
<div class="accordion">An accordion always comes after the p tag.</div>

Answer 1

您是第一个元素'class ='

的缺失=

这里和这里都有两个答案 $(".uniqueClass").next().andSelf().next().andSelf().wrapAll('<div class="test"/>');

或

var $set = $('.content').children();    
for(var i=0, len = $set.length; i < len; i+=3){
    $set.slice(i, i+3).wrapAll('<div class="test"/>');
} 

Answer 2

同一想法的另一个变化...

如果在整个页面中重复该HTML模式，则可能需要使用jQuery的each()将公式应用于每个块。您还可以添加灵活性以处理高于两个兄弟姐妹的标头。

对于每个.uniqueClass，我使用的是:lt()过滤CC_14，addBack()和wrapAll()。

在英语中：对于每个.uniqueClass，查找所有以下兄弟姐妹，直到下一个.uniqueClass，限制为2个兄弟姐妹，将原始选择器添加到集合中，然后用包装器元素包装。

。

var $wrapper = jQuery('<div>', {
  'class': 'wrapper'
});
jQuery('.uniqueClass').each(function() {
  jQuery(this).nextUntil('.uniqueClass', ':lt(2)').addBack().wrapAll($wrapper);
});

.wrapper {
  background-color: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="uniqueClass">Headline</h2>
<p>A p tag always follows.</p>
<div class="accordion">An accordion always comes after the p tag.</div>
<p>But not this one.</p>
<div>And not this one.</div>
<h2 class="uniqueClass">Headline</h2>
<p>A p tag always follows.</p>
<div class="accordion">An accordion always comes after the p tag.</div>
<ul>
  <li>But not this one.</li>
  <li>Nor this one.</li>
</ul>
<h2 class="uniqueClass">Headline</h2>
<p>Maybe this block doesn't have two siblings. That's ok.</p>
<h2 class="uniqueClass">Headline</h2>
<span>One</span>
<span>Two</span>
<span>Three</span>