javascript - 在 2 个匹配元素的内容周围添加一个 Div

Question

我正在尝试在 2 个 div 周围添加一个类名“包裹”的 div，其中包含 innerHTML“一”和“二”

<div class='blk'>one</div>
<div class='blk'>two</div>

在这里，我尝试使用第一个和第二个“clearfix”类元素，并将其用作选择器，用 div 将它们之间的内容包装起来。我从下面的代码中了解到 wrapAll 将只包装匹配的元素。我试图弄清楚 jquery 中的哪些功能将帮助我用父 div 包装一个和两个。

var arr = $('.clearfix');

$(arr[0], arr[1]).wrapAll('<div class="wrapped"/>');

.wrapped {
  background-color: 'red';
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class='clearfix'></div>
  <div class='blk'>one</div>
  <div class='blk'>two</div>
  <div class='clearfix'></div>
  <div class='blk'>3</div>
  <div class='blk'>4</div>
  <div class='clearfix'></div>
</div>

我的预期输出是：

<div>
  <div class='clearfix'></div>
  <div class='wrapped'>
    <div class='blk'>one</div>
    <div class='blk'>two</div> 
  </div>
  <div class='clearfix'></div>
  <div class='blk'>3</div>
  <div class='blk'>4</div>
  <div class='clearfix'></div>
</div>

标签： javascriptjqueryhtmlcss

Answer 1

你可以试试.filter()

var arr = $('.blk');
arr.filter((i, el) => i < 2).wrapAll(`<div class="wrapped"></div>`);

.wrapped{
  background-color: red;
}
.hidden{
  display:  none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
 <div class='clearfix'></div>
 <div class='blk'>one</div>
 <div class='blk'>two</div>
 <div class='clearfix'></div>
 <div class='blk'>3</div>
 <div class='blk'>4</div>
</div>