使用jQuery在同class的div中显示图片alt文本求助

这个问题很常见——你当前的实现应该是直接获取了第一个<img>的alt文本，然后把它统一赋值给了所有.folha元素，所以才会出现所有div都显示第一张图片alt的情况。我们需要针对每个包含图片的.folha单独处理，把对应的alt文本放到它自己的父div里。

原生JavaScript解决方案 #

这种方法不需要依赖任何库，直接用浏览器原生API实现：

// 选中所有包含img标签的.folha元素
const folhasWithImages = document.querySelectorAll('.folha:has(img)');

// 遍历每个符合条件的div
folhasWithImages.forEach(folha => {
  // 获取当前div里的img元素
  const imgElement = folha.querySelector('img');
  // 创建文本节点并添加到div中（如果div里已有其他内容，会追加在后面）
  const altTextNode = document.createTextNode(imgElement.alt);
  folha.appendChild(altTextNode);
  
  // 如果希望替换div内原有内容（比如只保留alt文本），可以改用：
  // folha.textContent = imgElement.alt;
});

jQuery解决方案（如果你项目中使用了jQuery） #

如果你的项目已经引入了jQuery，可以用更简洁的写法：

// 遍历每个.folha元素
$('.folha').each(function() {
  // 查找当前div内的img
  const $img = $(this).find('img');
  // 如果存在img元素，就把它的alt文本设置到当前div
  if ($img.length > 0) {
    $(this).text($img.attr('alt'));
  }
});

为什么之前的代码会出错？ #

举个例子，如果你的代码是这样写的：

// 只获取了第一个img的alt文本
const firstImgAlt = document.querySelector('img').alt;
// 把这个文本赋值给所有.folha
document.querySelectorAll('.folha').forEach(folha => {
  folha.textContent = firstImgAlt;
});

这种写法的问题在于document.querySelector('img')只会返回页面中第一个匹配的图片元素，所以所有div都会拿到这同一个alt值。而我们上面的解决方案是逐个处理每个包含图片的div，确保每个div拿到的是自己内部图片的alt文本。

内容的提问来源于stack exchange，提问作者Bruno F. Cardoso