javascript - 为什么我的语句没有更改并添加 anchor 标记的属性？

Question

我正在尝试更改 anchor 标记的值并添加新属性，但似乎不起作用。

document.getElementsByClassName('button')[0]
  .getElementsByTagName('a')[0]
  .attr({ 
    href: '#', 
    data: 'xyz', 
    name: 'test'
  });

Answer 1

问题是您尝试在 native DOM 元素上使用 jQuery 方法。我的猜测是您的浏览器抛出了一个指示此类错误的错误。

相反，使用 jQuery 语法创建实际的 jQuery 对象:

$('.button a').attr({ ... });

这样做的好处是长度只有一小部分。

如果您确实需要选择 jQuery 使用该选择器抓取的第一个元素，请使用 first():

$('.button a').first().attr({ ... });

这会将 jQuery 对象过滤为新对象，而无需转换为 native DOM 元素。然而，它很脆弱，因为它取决于您的标记来进行准确选择。我更愿意向该按钮添加另一个类或以祖先元素为目标以实现特异性:

$('.button.my-extra-class a').attr({ ... });