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

Current markup:

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

...等

Desired markup:

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

...等

我try 过这个:

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

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

推荐答案

您的代码很接近.您需要在.item上使用$.each()循环,如下所示:

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

工作片段:

$('.item').each(function() {
  $(this).find('.link-b,.link-c').wrapAll('<div class="wrapped" />');
});
.wrapped {
  background: grey;
}
<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 b</a>
  <a class="link-c">link c</a>
</div>

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

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

Jquery相关问答推荐

为什么函数没有进入

JQuery:$.get 不是函数

如何像这样通过 $.ajax ( serialize() + extra data ) 添加数据

jQuery 1.4.1 中缺少 JSON 字符串化?

如何在 jquery 中包含 !important

如何在使用 jQuery 单击特定链接时打开 bootstrap 导航选项卡的特定选项卡?

基于垂直滚动的jquery添加/删除类?

jQuery中追加的相反

jQuery UI 工具提示不支持 html 内容

jQuery - 多个 :not Select 器

如何签入用户已在 Google recaptcha 中选中复选框的 js?

JQuery - 如何根据值 Select 下拉项

使用 jQuery 获取 div 的可见高度

订单对象是否由指定的 jQuery Select 器返回?

如何使用 JQuery 获取 GET 和 POST 变量?

从客户端的对象数组中获取最新日期的优雅方法是什么?

如何淡出显示:inline-block

$.ajax 的成功和 .done() 方法有什么区别

如何确定滚动高度?

如何在jQuery中 Select 最后一个子元素?