javascript - 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

首先，正如亚当所说，#从您的 id 属性中删除前缀。还要匹配你的结束标签，目前你有</ul>一个</div>应该在的地方。

然后，您可以使用: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

尖锐不应该是 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>');
});