Выберите теги в родительском классе JavaScript - PullRequest
Новая
       6

Выберите теги в родительском классе JavaScript

0 голосов
/ 03 июля 2018

Я могу использовать это, чтобы выбрать все теги привязки в документе, что прекрасно работает ... 

var anchors = document.getElementsByTagName('a');

Специально для замены функциональности "href" на "onclick" (для расширения функциональности без JavaScript, добавления эскизов и т. Д.)

Кроме того, как я могу заставить его выбирать только элементы привязки в определенном классе родительского элемента (например, pics), оставляя большую часть якорей в одиночку? 

<a href="img/TEST/pretty.jpg">ignore me</a>
<div class="pics">
 <a href="img/TEST/testPic1.jpg">1 stuff....</a>
 <a href="img/TEST/testPic2.jpg">2 stuff...</a>
 <a href="img/TEST/TestPic3.jpg">3 stuff..</a>
 ...
 <a href="img/TEST/TestPicN.jpg">n stuff..</a>
</div>

... без дополнительных библиотек, таких как jQuery, пожалуйста!

Вот короткая демонстрация ... 

function go() {
    var anchorElements = document.getElementsByTagName('a');
    for (var i in anchorElements)
        anchorElements[i].style.backgroundColor = "red";
}
a{background-color:#0F0;}
<a href="img/TEST/pretty.jpg">ignore me</a>
<div class="pics">
 <a href="img/TEST/testPic1.jpg">1 stuff....</a>
 <a href="img/TEST/testPic2.jpg">2 stuff...</a>
 <a href="img/TEST/TestPic3.jpg">3 stuff..</a>
 ...
 <a href="img/TEST/TestPicN.jpg">n stuff..</a>
</div>
<button onclick="go()">Go!</button>

Я знаю, что обходной путь - просто выбрать по классу, примененному к элементам, которые нужно изменить

1 Ответ

0 голосов
/ 03 июля 2018

Используйте querySelectorAll('.pics a'), чтобы выбрать коллекцию <a> в .pic классе 

function go() {
    var anchorElements = document.querySelectorAll('.pics a');
    for (var i in anchorElements)
        anchorElements[i].style.backgroundColor = "red";
}
a{background-color:#0F0;}
<a href="img/TEST/pretty.jpg">ignore me</a>
<div class="pics">
 <a href="img/TEST/testPic1.jpg">1 stuff....</a>
 <a href="img/TEST/testPic2.jpg">2 stuff...</a>
 <a href="img/TEST/TestPic3.jpg">3 stuff..</a>
 ...
 <a href="img/TEST/TestPicN.jpg">n stuff..</a>
</div>
<button onclick="go()">Go!</button>
...