jQuery：仅包裹第一个和第二个孩子，而不包裹其余的孩子

Question

在我的实际代码中：

<div id="mother">
  <div id="child-01"></div>
  <div id="child-02"></div>
  <div id="child-03"></div>
  </ul>

我需要制作：

<div id="mother">
  <div id="myWrap">
    <div id="child-01"></div>
    <div id="child-02"></div>
  </div>
  <div id="child-03"></div>
  </ul>

我正在玩wrap、.wrapAll()和孩子，但我被困住了。

如果在我的实际代码中我有：

<div id="mother">
  <div id="child-01"></div>
  <div id="child-02"></div>
  <div id="child-03"></div>
  </ul>

  <div id="uncle">
    <div id="cousin-01"></div>
    <div id="cousin-02"></div>
    <div id="cousin-03"></div>
    </ul>

我如何生产：

<div id="mother">
  <div id="myWrap">
    <div id="child-01"></div>
    <div id="child-02"></div>
    <div id="cousin-02"></div>
  </div>
  <div id="child-03"></div>
  </ul>

Answer 1

首先，正如 Adam 所说，从 id 属性中删除 # 前缀。还要匹配您的结束标签，目前您有一个 ，其中 应该在。

然后，您可以使用 :lt() 和.wrapAll() 像这样：

$("#mother div:lt(2)").wrapAll("<div id='myWrap'></div>");

这将获取小于索引 2 的所有内容（0和1是前2个），然后换行。 您可以在这里测试。

Answer 2

从 HTML id 中删除 #。

$("#mother div:eq(0), #mother div:eq(1)").wrapAll("<div id='father'></div>")

Answer 3

Sharp 不应该是 id 的一部分。然后你可以这样做：

$('#child-01, #child-02').wrapAll('<div id="#mywrap" />');

Answer 4

$(document).ready(function(){
  $(".new-grid__item:nth-child(1), .new-grid__item:nth-child(2)").wrapAll('<div class="child"></div>');
});