Question

我正在尝试通过javascript在CMS生成的页面上的webform周围插入一个包装器div，我没有太多访问权限。我试图包装的所有HTML内容都存在于一堆div中，共享同一个类。应排除最高div。所以我得到了：

<div class="rowClass">This div should be excluded</div>
<div class="rowClass">This div and the rest should be wrapped</div>
<div class="rowClass">Content</div>
<div class="rowClass">Content</div>
<div class="rowClass">Content</div>
...
<div class="rowClass">Last Row</div>

我想要实现的基本上是：

    <div class="rowClass">This div should be excluded</div>

<div style=" width:1000px ; height:1500px; box-shadow: 1px 1px 2px"><!--This wrapper div would let me position and add a border bounding the divs below-->
  
    <div class="rowClass">This div and the rest should be wrapped</div>
    <div class="rowClass">Content</div>
    <div class="rowClass">Content</div>
    <div class="rowClass">Content</div>
    ...
    <div class="rowClass">Last Row</div>

</div><!--End wrapper div-->

我已经通过指定类使用insertAfter和insertBefore尝试了各种变体，并且还试图通过使用DOM子定位来指定div的放置位置，但我真的不在我的深度。我可以尝试使用jquery的最佳方法是：

$( "<div style=" width:1000px ; height:1500px; box-shadow: 1px 1px 2px">" ).insertBefore( ".rowClass:nth-of-type(2)" );
$( "</div>" ).insertAfter( ".rowClass:last-of-type");

Answer 1

试试这段代码：

$('.rowClass:not(:first)').wrapAll('<div...')

该选择器会抓取所有具有rowClass类的div并排除使用:not(:first)找到的第一个div。函数wrapAll用div代码包装找到的所有元素（排除第一个元素）。运行下面的代码段以查看它是否有效。

$(document).ready(function(){
  $('.rowClass:not(:first)').wrapAll('<div style=" width:1000px ; height:1500px; box-shadow: 1px 1px 2px">')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="rowClass">This div should be excluded</div>
<div class="rowClass">This div and the rest should be wrapped</div>
<div class="rowClass">Content</div>
<div class="rowClass">Content</div>
<div class="rowClass">Content</div>
...
<div class="rowClass">Last Row</div>

Answer 2

您需要创建一个元素，然后将您想要的每个元素追加到它：

var $wrapper = $('<div style="border: 1px solid black;">');
$wrapper.insertBefore(".rowClass:nth-of-type(2)");
$('.rowClass').each(function(index) {
   if ( index !== 0 ) {
       $wrapper.append(this);
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rowClass">This div should be excluded</div>
<div class="rowClass">This div and the rest should be wrapped</div>
<div class="rowClass">Content</div>
<div class="rowClass">Content</div>
<div class="rowClass">Content</div>
<div class="rowClass">Last Row</div>

Answer 3

这应该达到目的

jQuery("div.rowClass:gt(0)").wrapAll('<div style=" width:1000px ; height:1500px; box-shadow: 1px 1px 2px"/>')

在Div类JS / Jquery的特定实例周围插入Wrapper Div

3 个答案: