Как выбрать все элементы, чтобы применить к ним скрипт?

Question

[Mishcake]

Всем привет. На странице есть 10 дивов с классом tg-button, внутри которых лежит ссылка a (это особенность верстки, не могу это поправить). Как сделать так, чтобы скрипт применился к каждой из кнопок (а)? Сейчас скрипт "видит" и применяет логику только к самому первому.

Задача - прокидывать метки к ссылке, которая указана в кнопках (ссылка всегда одинаковая, а метки разные).

Помогите, пожалуйста.

$(document).ready(function() {
    const url = document.location.href;
    var link = document.querySelector('.tg-button > a');

    var href = 'https://ya.ru?';

    if(url.match(/utm_source=/)){
        href += '&utm_source=' + window.location.search.split('utm_source=')[1].split('&')[0];
    }

    if(url.match(/utm_medium=/)){
        href += '&utm_medium=' +  window.location.search.split('utm_medium=')[1].split('&')[0];
    }

    if(url.match(/utm_campaign=/)){
        href += '&utm_campaign=' + window.location.search.split('utm_campaign=')[1].split('&')[0];
    }
    link.setAttribute('href', href);
});

Answer 1

[historydev]

querySelectorAll
forEach

Answer 2

[wakenbyWork]

Решение на jquery ибо он у вас подключен уже. Но не советовал бы его использовать. Решение от Владимир лучше будет

$(document).ready(function() {
    const url = document.location.href;
    var link = $('.tg-button > a');

    var href = 'https://ya.ru?';

    if(url.match(/utm_source=/)){
        href += '&utm_source=' + window.location.search.split('utm_source=')[1].split('&')[0];
    }

    if(url.match(/utm_medium=/)){
        href += '&utm_medium=' +  window.location.search.split('utm_medium=')[1].split('&')[0];
    }

    if(url.match(/utm_campaign=/)){
        href += '&utm_campaign=' + window.location.search.split('utm_campaign=')[1].split('&')[0];
    }

    link.attr('href',  href);
});

Comments

[Mishcake]

Спасибо! А почему не рекомендуете использовать такой способ?

[wakenbyWork]

Mishcake, jquery уже умер, идет жесткое осуждение за его использование в комьюнити)) Все можно писать благополучно на нативном js.

Но если проект не новый, а legacy то можно, но в новых проектах не стоит, jqury стоит забыть

[Mishcake]

wakenbyWork, спасибо за ответ! Проект очень старый, там всё написано на jquery и я не стал пытаться, если честно, писать всё на ванильном джсе. Может и неправильный подход, но решил, что так будет лучше :((

Answer 3

[Сергей Соколов]

Удобно использовать URL API и его URLSearchParams:

const { searchParams } = new URL(document.location.href);
const url = new URL('https://ya.ru');

['utm_source', 'utm_medium', 'utm_campaign']
  .filter(param => searchParams.has(param))
  .forEach(param => url.searchParams.set(param, searchParams.get(param)));
const urlString = url.toString();

document.querySelectorAll('div.tg-button > a')
  .forEach(el => el.setAttribute('href', urlString));

Получить объект параметр-значение из адреса текущей страницы;
создать новый URL для ссылой в кнопки;
отфильтровать из набора utm-меток те, что есть в адресной строке,
и скопировать их в ссылку-для-кнопки.

Потом проставить всем кнопкам эту ссылку.