如何在重复的父div中为每个父元素包裹指定的两个a标签？

你当前的代码$('.item .link-b, .item .link-c').wrapAll('<div class="wrapped" />')会把所有匹配的.link-b和.link-c标签都移动到第一个.item容器里的同一个包裹div中——这是因为wrapAll()方法会将所有选中元素包裹进单个容器，并且会把它们统一移到第一个选中元素的位置。

要实现每个.item容器内单独包裹这两个a标签的需求，需要遍历每个.item，在单个容器内部执行包裹操作：

jQuery 解决方案 #

$('.item').each(function() {
  // 在当前.item容器内查找目标a标签，再执行wrapAll
  $(this).find('.link-b, .link-c').wrapAll('<div class="wrapped"></div>');
});

原生JavaScript 解决方案 #

如果不想依赖jQuery，也可以用原生JS实现：

// 遍历所有.item容器
document.querySelectorAll('.item').forEach(item => {
  // 获取当前容器内的目标a标签
  const targetLinks = item.querySelectorAll('.link-b, .link-c');
  if (targetLinks.length === 0) return;

  // 创建包裹div
  const wrapper = document.createElement('div');
  wrapper.classList.add('wrapped');

  // 将目标a标签逐个移入包裹div
  targetLinks.forEach(link => wrapper.appendChild(link));

  // 把包裹div插入到第一个目标标签原来的位置
  targetLinks[0].parentNode.insertBefore(wrapper, targetLinks[0]);
});

执行以上代码后，每个.item内的.link-b和.link-c都会被单独包裹在属于自己的.wrapped div中，完全符合你期望的HTML结构。

内容的提问来源于stack exchange，提问作者footstepsdesign