如何使用 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

我找到了一个适用于我使用此 function 的解决方案：

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

我在http://jsfiddle.net/QWHYK/中找到了该解决方案，并使用 jQuery 从 DIV 中的列表中包装元素集

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