Question

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

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

Answer 1

问题是您试图在本机DOM元素上使用jQuery方法。我的猜测是您的浏览器抛出了一个错误提示。

相反，使用jQuery语法创建一个实际的jQuery对象：

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

这有一个好处，那就是分数很长。

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

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

这会将jQuery对象过滤为一个新对象，而不转换为本机DOM元素。但是，它很脆弱，因为它取决于您的标记以进行准确选择。我更愿意为该按钮添加另一个类，或针对其祖先元素进行定位：

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

Answer 2

我整理了一个有关如何设置属性的示例。

let link = document.getElementsByTagName('a')[0];

link.setAttribute("href", "http://www.google.com");
link.setAttribute("data", "xyz");
link.setAttribute("data-name", "test");

<ul>
  <li>
    <a href="#">A link</a>
  </li>
</ul>

https://codepen.io/anon/pen/vaNZKd

有关设置属性的更多信息： https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

Answer 3

$("button")
    .first()
    .find("a")
    .first()
    .attr('href', '@')
    .attr('data', 'xyz')
    .attr('name', 'test');

这意味着您将在该按钮中获得第一个<button>，然后是第一个<a>，然后分配数据。

根据您的代码，我认为这就是您想要的。

Answer 4

您可以尝试使用querySelectorAll

     let anchor = document.querySelectorAll('a.button')[0];

     anchor.setAttribute("href", "http://www.google.com");

     <a href="#" class="button">A link - will be affected</a><br/>
     <a href="#" class="button">B link - not affected</a><br/>
     <a href="#">C link - not affected</a><br/>
     <a href="#">D link - not affected</a><br/>

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

4 个答案: