如何使用 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/ 中找到了该解决方案 和Wrapping sets of elements from a list in DIVs using jQuery

还有，How to wrap multiple divs中的另一种解决方案