jQuery在div中包装元素 [英] Jquery wrap elements inside div

问题描述

我想在以下三个元素上添加一个div:

I want to add a div on the three following elements:

<div class="wrapper">
   <fieldset class="inner"></fieldset>
   <fieldset class="inner first_name"></fieldset>
   <fieldset class="inner last_name"></fieldset>
   <fieldset class="inner user"></fieldset>
   <fieldset class="inner password"></fieldset>
   <fieldset class="inner"></fieldset>
   <fieldset class="inner avatar"></fieldset>
   <fieldset class="inner submit"></fieldset>
</div>

结果如下:

<div class="wrapper">

   <div class="inner-left">
      <fieldset class="inner"></fieldset>
      <fieldset class="inner first_name"></fieldset>
      <fieldset class="inner last_name"></fieldset>
      <fieldset class="inner user"></fieldset>
      <fieldset class="inner password"></fieldset>
   </div>

   <div class="inner-middle">
      <fieldset class="inner"></fieldset>
      <fieldset class="inner avatar"></fieldset>
   </div>

   <div class="inner-right">
      <fieldset class="inner submit"></fieldset>
   </div>

</div>

我已经尝试了Jquery Multiple Wrap，但是我无法实现它. 可以用jQuery完成吗?

I've tried Jquery Multiple Wrap, but I can not implement it. can it be done with jQuery?

谢谢

推荐答案

在jquery中使用.wrapAll().然后.slice()拆分所需的dom元素

Use .wrapAll() in jquery. And .slice() split the dom elements what you want

$(".inner").slice(0,5).wrapAll( "<div class='inner-left'></div>" );
$(".inner").slice(5,7).wrapAll( "<div class='inner-middle'></div>" );
$(".inner").slice(7).wrapAll( "<div class='inner-right'></div>" );

演示

var cache = $( ".inner" )

cache.slice(0,5).wrapAll( "<div class='inner-left'></div>" )
     .end()
     .slice(5,7).wrapAll( "<div class='inner-middle'></div>" )
     .end()
     .slice(7).wrapAll( "<div class='inner-right'></div>" );

这篇关于jQuery在div中包装元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！