如何用jQuery匹配数组中alt标签的图片并添加HTML元素？

安全阿岳

2026-5-13

解决多Alt标签匹配的jQuery实现问题

嘿，你的问题很常见——当需要匹配一组值而不是单个值时，原来的单值判断逻辑就不适用了，我来帮你修正代码：

首先看你当前代码的两个核心问题：

你定义list的方式不对：var list = ("1904381_BERR", "1904380_ORAN"); 这种写法其实是逗号操作符，最后只会保留最后一个值"1904380_ORAN"，根本不是数组。
判断条件$(this).attr("alt") == list是拿单个字符串和整个数组比较，永远不会成立。

修正后的代码方案

我们需要把目标alt值定义成数组，然后检查当前图片的alt是否存在于这个数组中，这里有两种常用方法：

方法1：使用jQuery的`$.inArray()`方法

$(document).ready(function() {
  // 正确定义需要匹配的alt标签数组
  var targetAlts = ["1904381_BERR", "1904380_ORAN"];
  
  $('img').each(function(){
    var currentAlt = $(this).attr("alt");
    // 用$.inArray检查当前alt是否在目标数组中，返回-1表示不存在
    if($.inArray(currentAlt, targetAlts) !== -1){
      $(this).before('<img src="/images/guide/dropped.png" class="cxl">');
    }
  });
});

方法2：使用原生JS的`Array.includes()`方法（更简洁）

如果你的项目环境支持ES6+，原生数组的includes()方法更直观：

$(document).ready(function() {
  var targetAlts = ["1904381_BERR", "1904380_ORAN"];
  
  $('img').each(function(){
    if(targetAlts.includes($(this).attr("alt"))){
      $(this).before('<img src="/images/guide/dropped.png" class="cxl">');
    }
  });
});