如何用 div 包装前三个标签？

Question

我得到了一些动态代码，我必须用 div 包装前三个元素。 我尝试了下面的代码，但它不工作。

<div class="summary">
    <form class="cart">
        <button></button>
        <div><div></div></div>
        <button></button>
        <button></button>
    </form>
</div>

$(function(){
    $('.cart').wrap('<div class="product-tab"></div>'); 
});

所以我的期望 output 是，

<div class="summary">
    <form class="cart">
        <div class="product-tab">
            <button></button>
            <div><div></div></div>
            <button></button>
        </div>
        <button></button>
    </form>
</div>

Answer 1

关于提伯斯的注释。 M的回答：从 jQuery 3.4 开始，选择器:lt()已弃用。 您也可以使用.slice() 。 资源

 $(function () { $('.cart>*').slice(0, 3).wrapAll('<div class="product-tab"></div>'); });

 .summary { background-color: red; }.product-tab { background-color: blue; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div class="summary"> <form class="cart"> <button></button> <div><div></div></div> <button></button> <button></button> </form> </div>

Answer 2

这是一种方法：

使用.cart>*:lt(3)作为选择器和wrapAll()

 $(function() { $('.cart>*:lt(3)').wrapAll('<div class="product-tab"></div>'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="summary"> <form class="cart"> <button></button> <div> <div></div> </div> <button></button> <button></button> </form> </div>

结果：

<div class="summary">
  <form class="cart">
    <div class="product-tab">
      <button></button>
      <div>
        <div></div>
      </div>
      <button></button>
    </div>
    <button></button>
  </form>
</div>

---

笔记：

根据:lt的文档，

从 jQuery 3.4 开始，不推荐使用：lt 伪类。 将其从选择器中删除，稍后使用.slice() 过滤结果。 例如，:lt(3) 可以替换为对.slice(0, 3) 的调用。

所以你应该使用： $('.cart>*').slice(0, 3).wrapAll(...)对于 3.4+ 版本。