Современные браузеры поддерживают native querySelectorAll
, поэтому вы можете сделать:
document.querySelectorAll('[data-foo="value"]');
https://developer.mozilla.org/en-US/docs/Web/API/Document. querySelectorAll
Сведения о совместимости браузера:
Вы можете использовать jQuery для поддержки устаревших браузеров (IE9 и старше):
$('[data-foo="value"]');
Вы можете попробовать 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/>
Проблема заключается в том, что вы пытаетесь использовать метод jQuery для собственного элемента DOM. Я предполагаю, что ваш браузер бросает ошибку, указывающую на это.
Вместо этого используйте синтаксис jQuery для создания фактического объекта jQuery:
$('.button a').attr({ ... });
Это имеет бонусное преимущество, поскольку оно является долей как можно дольше.
Если вам действительно нужно выбрать первый из элементов, которые использует jQuery с этим селектором, используйте first()
:
$('.button a').first().attr({ ... });
. Фильтрует объект jQuery в новый, без преобразование в собственный элемент DOM. Это хрупко, однако, потому что это зависит от вашей разметки для точного выбора. Я бы предпочел добавить еще один класс к этой кнопке или указать элемент предка для специфики:
$('.button.my-extra-class a').attr({ ... });
[0]
для работы с коллекцией, зная, что существует только один элемент
– Rory McCrossan
13 July 2018 в 13:50
Я собрал пример того, как вы можете установить атрибуты.
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 / Элемент / SetAttribute
$("button")
.first()
.find("a")
.first()
.attr('href', '@')
.attr('data', 'xyz')
.attr('name', 'test');
Это означает, что вы получаете первый <button>
, затем первый <a>
внутри этой кнопки, а затем назначаете данные.
На основании вашего кода я предположим, что это то, что вы хотите.
first()
когда-нибудь понадобится, и лучше всего комбинировать экземпляры attr()
по мере того, как OP уже сделал.
– isherwood
13 July 2018 в 14:03