能否使用jQuery为列表项添加多个ID？

嘿，这个问题问得很实际！先直接给你结论：HTML元素不能拥有多个id属性——这不符合W3C的HTML规范，浏览器在解析的时候只会识别第一个id，剩下的都会被忽略掉，所以你那样写是行不通的。

为什么不能加多个id？ #

id属性的设计初衷是为元素提供唯一的文档级标识，整个HTML文档里每个id值都应该是独一无二的。一个元素绑定多个id本身就违背了这个设计逻辑，浏览器也不会支持这种写法。

替代方案推荐 #

根据你的需求（存储多个业务标识，比如主客场、平局的ID），这里有几个合规且实用的方法：

• 使用class属性（适合分类标识）
  如果这些ID不需要唯一性，只是用来标记元素的类别，class支持添加多个值，用空格分隔即可：

  <li class="home away draw"></li>
  

  在JavaScript中，你可以通过document.querySelectorAll('.home, .away, .draw')来选择包含这些类的元素，或者单独针对某个类查询。

• 使用自定义data-*属性（适合存储业务数据）
  这是HTML5专门为存储自定义业务数据设计的方案，非常适合你的场景：

  <li data-home="'+ y.home +'" data-away="'+ y.away +'" data-draw="'+ y.draw +'"></li>
  

  之后在JavaScript里，可以通过元素的dataset属性轻松获取这些值：

  const listItem = document.querySelector('li');
  console.log(listItem.dataset.home); // 输出y.home的值
  console.log(listItem.dataset.away); // 输出y.away的值
  

  这种方式既符合规范，又能清晰地把业务数据和元素绑定，可读性和维护性都很强。

• 合并ID到单个id属性（不推荐，仅作备选）
  如果一定要用id来存储，你可以把多个ID用分隔符（比如下划线、逗号）拼接成一个唯一值：

  <li id="'+ y.home +'_'+ y.away +'_'+ y.draw +'"></li>
  

  之后在JS里可以通过拆分id字符串来获取各个部分，但这种方式可读性差，也容易出现id重复的问题，除非万不得已不建议使用。

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