如何使用JQuery包装div子级的特定列表

Question

我正在谷歌优化中进行AB测试。我需要将div从数字5包装到10，但我无法做到：

<div class="container active" data-order="1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<button>11</button>
<div>12</div>
</div>

我使用这段代码来完成它，但它从div编号1开始包装，但我想从div编号5开始直到10

$('.gsw_cf.step.active > div:lt(#)').wrapAll('<div class="wrapped 5to10"/>');

有人知道我应该加什么吗？

谢谢

Answer 1

您可以使用jQuery的slice((；

$('.active > div').slice(5,10).wrapAll('<div class="wrapped 5to10"/>');

$('.active > div').slice(5,10).wrapAll('<div class="wrapped 5to10"/>');

.wrapped{
background:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container active" data-order="1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<button>11</button>
<div>12</div>
</div>

Answer 2

我找到了一个可以在使用此函数时使用的解决方案：

$('div[data-order="1"]').each(function(){
$(this).children(".input_wrapper.text").wrapAll("<div class='wrapper' />");
});

我在http://jsfiddle.net/QWHYK/以及使用jQuery 将列表中的元素集封装在DIV中

还有，在如何包装多个div 中的另一个解决方案