CODEWITHSUNDEEP
javascriptjquery
user2582360
user2582360

Reputation: 55

Wrapping multiple divs

I have divs 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 divs.

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.

Upvotes: 0

Views: 190

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388446

Try

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

Demo: Fiddle

Upvotes: 4

Related Questions