javascript - .wrapAll，除了通用包装器内的一个

Question

我有一组生成的 div 宽度相同的类，其中包含标题和一系列链接。由于某种原因，末尾有一个隐藏的 header 。

它们看起来像这样:

<div class="wrapper">
  <label class="Descr">List Header </label>
  <a href="#">List item </a>
  <a href="#">List item </a>
  <a href="#">List item </a>
  <a href="#">List item </a>
  <label class="Descr2" style="display:none">Hidden List Header</label>
</div>
<div class="wrapper">
  <label class="Descr">List Header </label>
  <a href="#">List item </a>
  <a href="#">List item </a>
  <a href="#">List item </a>
  <a href="#">List item </a>
  <label class="Descr2" style="display:none">Hidden List Header</label>
</div>

我得到了大约三到四个这样的实例。请注意，我无法更改代码。

现在我想将每个父级中的 anchor 包装在 div 内，以便能够向其添加 jQuery 滚动。

但是使用像 .wrapAll 这样的东西会将所有 anchor 移动到一个 div 中并清空其他元素。

jQuery('.wrapper a').wrapAll('<div class="content"></div>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <label class="Descr">List Header </label>
  <div class="content">
    <a href="#">List item </a>
    <a href="#">List item </a>
    <a href="#">List item </a>
    <a href="#">List item </a>
    <a href="#">List item </a>
    <a href="#">List item </a>
    <a href="#">List item </a>
    <a href="#">List item </a>
  </div>
  <label class="Descr2" style="display:none">Hidden List Header</label>
</div>
<div class="wrapper">
  <label class="Descr">List Header </label>

  <label class="Descr2" style="display:none">Hidden List Header</label>
</div>

有人知道如何单独定位 div，即使我只定义了通用类并使 acnhors 留在其 parent 体内？

Answer 1

$('.wrapper').each(function() { 
    $('a', this).wrapAll('<div class="content"></div>');
});