Wrapping multiple divs

Question

I have div s with two class name k-edit-label and k-edit-feild , which i need to wrap within in one class with name wrapper . How can I wrap the following div s.

HTML:

<div class="k-edit-label"></div>
<div class="k-edit-field" data-container-for="personType"></div>
<div class="k-edit-label"></div>
<div class="k-edit-field" data-container-for="personStyle"></div>
<div class="k-edit-label"></div>
<div class="k-edit-field" data-container-for="title"></div>
<div class="k-edit-label"></div>
<div class="k-edit-field" data-container-for="firstName"></div>

<div class="k-edit-label"></div>
<div class="k-edit-field" data-container-for="middleName"></div>
<div class="k-edit-label"></div>
<div class="k-edit-field" data-container-for="lastName"></div>
<div class="k-edit-label"></div>
<div class="k-edit-field" data-container-for="fatherName"></div>
<div class="k-edit-label"></div>
<div class="k-edit-field" data-container-for="spouseName"></div>

<div class="k-edit-label"></div>
<div class="k-edit-field" data-container-for="dob"></div>
<div class="k-edit-label"></div>
<div class="k-edit-field" data-container-for="occupation"></div>
<div class="k-edit-label"></div>
<div class="k-edit-field" data-container-for="languagesKnown"></div>
<div class="k-edit-label"></div>
<div class="k-edit-field" data-container-for="urLoginName"></div>

into like this:

<div class="wrapper">
  <div class="k-edit-label"></div>
  <div class="k-edit-field" data-container-for="personType"></div>
  <div class="k-edit-label"></div>
  <div class="k-edit-field" data-container-for="personStyle"></div>
  <div class="k-edit-label"></div>
  <div class="k-edit-field" data-container-for="title"></div>
  <div class="k-edit-label"></div>
  <div class="k-edit-field" data-container-for="firstName"></div>
</div>
<div class="wrapper">
  <div class="k-edit-label"></div>
  <div class="k-edit-field" data-container-for="middleName"></div>
  <div class="k-edit-label"></div>
  <div class="k-edit-field" data-container-for="lastName"></div>
  <div class="k-edit-label"></div>
  <div class="k-edit-field" data-container-for="fatherName"></div>
  <div class="k-edit-label"></div>
  <div class="k-edit-field" data-container-for="spouseName"></div>
</div>
<div class="wrapper">
  <div class="k-edit-label"></div>
  <div class="k-edit-field" data-container-for="dob"></div>
  <div class="k-edit-label"></div>
  <div class="k-edit-field" data-container-for="occupation"></div>
  <div class="k-edit-label"></div>
  <div class="k-edit-field" data-container-for="languagesKnown"></div>
  <div class="k-edit-label"></div>
  <div class="k-edit-field" data-container-for="urLoginName"></div>
</div>

I have tried by using this:

$('.k-edit-field:nth-child(4n)').each(function(index) {
  $(this).prevAll('.k-edit-field').andSelf().wrapAll('<div class="wrapper" />');
});

$('.k-edit-form-container > .k-edit-field').wrapAll('<div class="wrapper" />');

but its not working because of multiple class name inside the divs.

Answer 1

Try

$('.k-edit-label:nth-child(8n+1)').each(function(i){
    $(this).nextAll(':lt(7)').addBack().wrapAll('<div class="wrapper"/>')
})

Demo: Fiddle