当父div是重复元素时，如何将一些子元素包裹在父div中

Question

我有一组重复的 div，我不知道会有多少个。每个 div 中都有一些内容，我想在每个父 div 的 div 中包装 2 个特定的 a 标签

当前加价：

<div class="item">
    <p>text</p>
    <a class="link-a">link a</a>
    <a class="link-b">link a</a>
    <a class="link-c">link a</a>
</div>

<div class="item">
    <p>text</p>
    <a class="link-a">link a</a>
    <a class="link-b">link a</a>
    <a class="link-c">link a</a>
</div>

<div class="item">
    <p>text</p>
    <a class="link-a">link a</a>
    <a class="link-b">link a</a>
    <a class="link-c">link a</a>
</div>

...等等

所需加价：

<div class="item">
    <p>text</p>
    <a class="link-a">link a</a>
    <div class="wrapped">
        <a class="link-b">link a</a>
        <a class="link-c">link a</a>
    </div>
</div>

<div class="item">
    <p>text</p>
    <a class="link-a">link a</a>
    <div class="wrapped">
        <a class="link-b">link a</a>
        <a class="link-c">link a</a>
    </div>
</div>

<div class="item">
    <p>text</p>
    <a class="link-a">link a</a>
    <div class="wrapped">
        <a class="link-b">link a</a>
        <a class="link-c">link a</a>
    </div>
</div>

...等等

我试过这个：

$('.item .link-b, .item .link-c').wrapAll('<div class="wrapped" />');

但这会导致所有链接都被包装在一个 div 中。包装在第一个项目中。

Answer 1

你的代码已经很接近了。你需要像这样使用

$.each()

循环

.item

：

$('.item').each(function(){
  $(this).find('.link-b, .item .link-c').wrapAll('<div class="wrapped" />');
});

工作片段：

$('.item').each(function() {
  $(this).find('.link-b, .item .link-c').wrapAll('<div class="wrapped" />');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="item">
  <p>text</p>
  <a class="link-a">link a</a>
  <a class="link-b">link a</a>
  <a class="link-c">link a</a>
</div>

<div class="item">
  <p>text</p>
  <a class="link-a">link a</a>
  <a class="link-b">link a</a>
  <a class="link-c">link a</a>
</div>

<div class="item">
  <p>text</p>
  <a class="link-a">link a</a>
  <a class="link-b">link a</a>
  <a class="link-c">link a</a>
</div>