為什么我的語句沒有更改並添加錨標記的屬性？

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/zh-CN/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/>