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>'); 
});

所以我的期望输出是，

<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

关于 Tibebes. M 的回答的说明：从 jQuery 3.4 开始，选择器 :lt() 已被弃用。您也可以使用 .slice()。 Source

$(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>

注意：

根据Documentation for :lt，

<块引用>

从 jQuery 3.4 开始， :lt 伪类已被弃用。从您的选择器并稍后使用 .slice() 过滤结果。为了例如， :lt(3) 可以替换为对 .slice( 0, 3 ) 的调用。

因此，对于 3.4+ 版本，您应该使用：$('.cart>*').slice(0, 3).wrapAll(...)。

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

2 个答案: