遍历DOM元素为子元素动态添加data-attribute的实现问题

我看你遇到的问题是没法成功给指定元素添加data-head属性，咱们先拆解下你代码里的问题，再给你可行的实现方案：

你的代码里的几个问题： #

• 选择器错误：你用了div.body，但你的DOM结构里根本没有class为body的元素，应该定位到.mac容器下的子元素才对。
• jQuery与原生JS混用逻辑错误：你用document.querySelectorAll拿到原生DOM节点集合后，又用$(selector).find(items[i])的写法搞反了查找逻辑——应该是针对每个.my-item，在它内部查找对应的子元素，而不是反过来。
• 方法使用错误：如果是jQuery对象，不能调用原生的setAttribute方法，得用jQuery的.attr()或.data()；如果是原生DOM元素，才用setAttribute。

方案1：纯jQuery实现（适配你引入的jQuery库） #

直接遍历每个.mac容器，定位到它的第一个和第二个直接子元素即可：

$('.my-item .mac').each(function() {
  // 获取当前.mac下第一个子元素的文本（去掉首尾空格更严谨）
  const headText = $(this).children().first().text().trim();
  // 给第二个子元素添加data-head属性
  $(this).children().eq(1).attr('data-head', headText);
});

方案2：原生JS实现（无需依赖jQuery） #

如果不想用jQuery，用原生API也能轻松实现：

// 获取所有.mac容器
const macContainers = document.querySelectorAll('.my-item .mac');
// 遍历每个容器
macContainers.forEach(mac => {
  // 拿到第一个和第二个直接子元素
  const firstChild = mac.firstElementChild;
  const secondChild = mac.children[1];
  // 加个判断避免元素不存在时报错
  if (firstChild && secondChild) {
    const headText = firstChild.textContent.trim();
    secondChild.setAttribute('data-head', headText);
  }
});

这两个方案都能帮你得到期望的DOM结构：

<div class="my-item"> <div class="mac"> <h1>test123</h1> <div data-head="test123">p1</div> </div> </div>
<div class="my-item"> <div class="mac"> <h2>test456</h2> <div data-head="test456">p2</div> </div> </div>

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