如何使JavaScript代码作用于所有相同ID的HTML元素？

首先要明确一个核心问题：HTML规范里，页面中每个元素的ID必须是唯一的，这就是为什么你的代码只作用于第一个#dadosalvaje元素——jQuery的$('#dadosalvaje')只会选中DOM中第一个匹配该ID的元素。

要解决这个问题，我们需要两步调整：修正HTML的重复ID问题，然后修改JavaScript代码来遍历所有目标元素。

步骤1：修正HTML结构 #

把重复的id="dadosalvaje"替换成class="dadosalvaje"，因为class允许在多个元素上重复使用：

<div class="dadosalvaje draconistone">
  <dl class="codebox">
    <dd><strong>Número aleatorio (1,10) : </strong>1</dd>
  </dl>
</div>
<div class="dadosalvaje draconistone">
  <dl class="codebox">
    <dd><strong>Número aleatorio (1,10) : </strong>3</dd>
  </dl>
</div>

步骤2：修改JavaScript代码 #

使用jQuery的.each()方法遍历所有带dadosalvaje类的元素，对每个元素单独执行逻辑，确保每个元素的处理都是独立的：

$(document).ready(function() {
  // 定义数组
  const zonas = ['draconistone','cessabit', 'valoran'];
  const draconistone = ['bulbasaur', 'pikachu', 'squirtle'];

  // 遍历所有目标元素
  $('.dadosalvaje').each(function() {
    // 当前遍历到的元素（转换为jQuery对象）
    const contenedor = $(this);
    // 获取当前元素的文本并提取结果数字
    const texto = contenedor.text().split(' ');
    const resultado = texto.pop();
    // 获取当前元素的zone类（这里假设元素只有一个zone类）
    const zonaID = contenedor.attr('class').split(' ').find(cls => zonas.includes(cls));

    // 根据zone选择对应的宝可梦
    let pokemonSprite;
    if (zonaID === 'draconistone') {
      pokemonSprite = draconistone[resultado - 1];
    }
    // 可以在这里添加其他zone的逻辑，比如cessabit、valoran的宝可梦数组

    // 添加图片和名称，并修改元素ID
    if (pokemonSprite) {
      contenedor.append(`<img src="https://www.pkparaiso.com/imagenes/xy/sprites/animados/${pokemonSprite}.gif"><div class="salvajeNombre">${pokemonSprite}</div>`);
      contenedor.attr('id', 'salvajelisto');
    }
  });
});

关键修改点说明 #

1. 替换ID为class：遵循HTML规范，避免重复ID导致的DOM选择问题。
2. 使用.each()遍历：确保每个目标元素都会被单独处理，而不是只处理第一个。
3. 局部变量隔离：在.each()循环内定义contenedor、resultado等变量，确保每个元素的处理数据不会互相干扰。
4. 更健壮的zone类获取：用split(' ').find()从元素的class列表中匹配zonas数组里的类，避免元素有多个class时出错。

内容的提问来源于stack exchange，提问作者Enrique Bermúdez