[英]Wrap around groups of elements using jQuery
I've got a list of elements and I want to group them with div starting with the class HEADER and end it if the class is BREAK or the last element. 我有一个元素列表,我想将它们与div分组,从HEADER类开始,如果类是BREAK或最后一个元素,则将其结束。
So the code below, 所以下面的代码
<div class="test">Test 0</div>
<div class="header">Header 1</div>
<div class="test">Test 1</div>
<div class="header">Header 2</div>
<div class="test">Test 2</div>
<div class="test">Test 3</div>
<div class="break">Break 1</div>
<div class="header">Header 3</div>
<div class="test">Test 4</div>
<div class="test">Test 5</div>
<div class="header">Header 4</div>
<div class="test">Test 6</div>
<div class="break">Break 2</div>
<div class="test">Test 7</div>
<div class="header">Header 5</div>
<div class="test">Test 8</div>
Would become, 会成为,
<div>
<div class="test">Test 0</div>
<div class="group">
<div class="header">Header 1</div>
<div class="test">Test 1</div>
<div class="header">Header 2</div>
<div class="test">Test 2</div>
<div class="test">Test 3</div>
</div>
<div class="break">Break 1</div>
<div class="group">
<div class="header">Header 3</div>
<div class="test">Test 4</div>
<div class="test">Test 5</div>
<div class="header">Header 4</div>
<div class="test">Test 6</div>
</div>
<div class="break">Break 2</div>
<div class="test">Test 7</div>
<div class="group">
<div class="header">Header 5</div>
<div class="test">Test 8</div>
</div>
<div>
Any ideas? 有任何想法吗? Thanks in advance.
提前致谢。
You can use wrapAll()
method as shown below: 您可以使用
wrapAll()
方法,如下所示:
$(".header").each(function() { var $group = $(this).nextUntil(".break").addBack(); if (!$(this).closest(".group").length) $group.wrapAll('<div class="group"/>'); });
.group { background: dodgerblue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test">Test 0</div> <div class="header">Header 1</div> <div class="test">Test 1</div> <div class="header">Header 2</div> <div class="test">Test 2</div> <div class="test">Test 3</div> <div class="break">Break 1</div> <div class="header">Header 3</div> <div class="test">Test 4</div> <div class="test">Test 5</div> <div class="header">Header 4</div> <div class="test">Test 6</div> <div class="break">Break 2</div> <div class="test">Test 7</div> <div class="header">Header 5</div> <div class="test">Test 8</div>
Reference: 参考:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.