我有一个像这样的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字符串并将它们放回去?
要做到这一点,你可以遍历每个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,因为它们是非标准的。