Question

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

此代码段之前和之后的元素不一致，因此我无法将.next用于下一个<h2>等，但.UniqueClass位于{{1}我认为我可以关键的东西是什么？

我尝试过以下但是没有用。
如何将<h2>，<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"/>');
}

Answer 1

你在第一个元素上缺少=＆＃39; class =＆＃39;

关于此主题here和here有几个答案 $(".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＆＃39; each()将公式应用于每个块。您还可以灵活地处理具有多于或少于两个兄弟的标头。

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

英文：对于每个.uniqueClass，找到以下所有兄弟姐妹，直到下一个.uniqueClass，限制为2个兄弟，将原始选择器添加到集合中，并使用包装元素包装该集合。 / p>

＆＃13;

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

＆＃13;

.wrapper {
  background-color: lightgreen;
}

＆＃13;

<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>

＆＃13;

如何在包装类

2 个答案: