Question

我有div个，有两个类名k-edit-label和k-edit-feild，我需要在一个名为wrapper的类中包含它。如何包装以下div。

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>

就像这样：

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

我尝试过使用它：

$('.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" />');

但由于div内有多个类名，因此无效。

Answer 1

尝试

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

演示：Fiddle

包装多个div

1 个答案: