jQuery在div中包装元素

Question

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

<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完成吗？

谢谢，

Answer 1

在jquery中使用.wrapAll() 。 然后.slice()将dom元素拆分为您想要的

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

DEMO

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>" );

Answer 2

您可以使用:lt和:gt伪选择器来获取一系列元素，然后将wrapAll放入元素中：

$('.inner:lt(5)').wrapAll($('<div>').addClass('inner-left'));
$('.inner:gt(4):lt(2)').wrapAll($('<div>').addClass('inner-middle'));
$('.inner:gt(6)').wrapAll($('<div>').addClass('inner-right'));

演示： http : //jsfiddle.net/7JY8p/1/

Answer 3

尝试这个

$('.inner:eq(0), .inner:eq(1), .inner:eq(2), .inner:eq(3), .inner:eq(4)').wrapAll( "<div class='inner-left'></div>");

$('.inner:eq(5), .inner:eq(6)').wrapAll( "<div class='inner-middle'></div>");

$('.inner:eq(7)').wrap( "<div class='inner-right'></div>");