jQuery根据文本选中<a>标签并添加target属性报错排查

这个错误很常见，我来帮你理清楚原因和解决办法：

错误原因 #

你代码里的$('a:contains("Attachments and Documents")')[0]返回的是原生DOM元素，而不是jQuery包装后的对象。attr()是jQuery特有的方法，原生DOM元素没有这个方法，所以会抛出TypeError: tgb.attr is not a function的异常。

几种可行的解决方案 #

方案1：直接使用jQuery对象操作

去掉[0]，直接用选择器返回的jQuery对象调用attr()：

var tgb = $('a:contains("Attachments and Documents")');
tgb.attr('target', '_blank');

如果页面中可能存在多个匹配的链接，想确保只给第一个设置属性，可以加上.first()：

var tgb = $('a:contains("Attachments and Documents")').first();
tgb.attr('target', '_blank');

方案2：使用原生DOM的setAttribute方法

如果你坚持要获取原生DOM元素，那就用原生的setAttribute()方法代替jQuery的attr()：

var tgb = $('a:contains("Attachments and Documents")')[0];
tgb.setAttribute('target', '_blank');

方案3：用.eq(0)获取第一个jQuery对象

.eq(0)会返回一个包含第一个匹配元素的jQuery对象，而不是原生DOM元素，这样就能正常调用attr()了：

var tgb = $('a:contains("Attachments and Documents")').eq(0);
tgb.attr('target', '_blank');

另外提醒一下：:contains选择器是区分大小写的，如果你的链接文本和代码里的大小写不一致，可能会匹配不到元素，这点可以留意下~

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