Как повторить href URL в строке, а затем добавить дополнительные символы между

Question

Мне нужно получить существующий URL из href и повторить его с некоторыми дополнительными символами между ними (чтобы вызвать всплывающее окно).

Например, <div class="item"><a href="https://website.com"></a></div>

станет<div class="item"><a href="https://website.com?modal-link=https://website.com"></a></div>

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

Заранее спасибо :)

Answer 1

Вы можете выбрать все теги привязки (<a>) в вашем div с классом item, используя $('.item a'), а затем перебрать каждый из них, используя .each.При просмотре определенного тега привязки вы можете получить его текущий href с помощью $(this).attr("href"), а затем изменить его, добавив ссылку в конец.

Наконец, вы можете обновить текущий тег привязки, используя $(this).attr('href', href);

См. Рабочий пример ниже:

$('.item a').each(function() {
  let href = $(this).attr('href'); // get href from the anchor tag
  href += "?modal-link=" + href; // add the query string to it
  $(this).attr('href', href); // update the href attribute
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="https://website.com">My Link (same)</a>
<div class="item">
  <a href="https://website.com">My Link (changes)</a>
  <br/>
  <a href="https://website2.com">My Link2 (changes)</a>
</div>