Question

我有一系列这样的课程：

<div class="groupLabelHeader">Countertop Dimensions</div>
<div class="option1">Option</div>
<div class="option2">Option</div>
<div class="option3">Option</div>
<div class="groupDivider"></div>

我想在自己的div中包含与台面尺寸相关的所有选项，无论内部的html如何。

所以它看起来像这样：

<div class="countertopDimensions">
    <div class="groupLabelHeader">Countertop Dimensions</div>
    <div class="option1">Option</div>
    <div class="option2">Option</div>
    <div class="option3">Option</div>
</div>
<div class="groupDivider"></div>

我尝试了.wrapAll（）但它包围了每个元素的div而不是所有元素。

Answer 1

这有效：

$("button").click(function(){
        $("div:not('.groupDivider')").wrapAll("<div class='hello'></div>");
    });

Answer 2

您可以创建.countertopDimensions div，在.groupDivider之前插入，然后在.countertopDimensions内移动元素。

jQuery(function($) {
  var $wrapper = $('<div class="countertopDimensions"></div>');
  $('.groupDivider').before($wrapper);
  $('.groupLabelHeader,.option1,.option2,.option3').appendTo($wrapper);
});

.groupLabelHeader,.option1, .option2, .option3 {
  background: #ff0000;
}
.countertopDimensions .groupLabelHeader, .countertopDimensions .option1, .countertopDimensions .option2, .countertopDimensions .option3 {
  background: #ffff00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="groupLabelHeader">Countertop Dimensions</div>
<div class="option1">Option</div>
<div class="option2">Option</div>
<div class="option3">Option</div>
<div class="groupDivider"></div>

用jQuery中的另一个div包装一组各种类的div

2 个答案: