Как с помощью jQuery скопировать ссылку и применить ее к текстовому блоку

Question

Здравствуйте!

Есть следующая конструкция:

div span {
  display: block;
  font-size: 18px;
  padding: 10px 0;
}

<div>
  <span class="txt-block">Произвольный текст</span>
  <span class="wrapper-link"><a class="link" href="https://yandex.ru/">Подробнее</a></span>
</div>

Подскажите как можно с помощью jQuery при загрузке страницы скопировать ссылку и применить ее к блоку с текстом и после этого саму ссылку удалить.

Другими словами чтобы span с текстом "Произвольный текст" стал ссылкой, адрес ссылки берется из ссылки с классом link , после этого span с исходной ссылкой / классом wrapper-link удаляется.

Буду признателен за ответ в виде скрипта, если такое конечно вообще возможно сделать с помощью jQuery

Answer 1

jQuery(function($) {
  $('.div-link').each(function() {
    const src = $('.wrapper-link', this);
    const link = $('a', src);
    const dst = $('.txt-block', this);
    link.text($(dst).text());
    $(dst).text('').append(link);
    src.remove();
  });
});

div span {
  display: block;
  font-size: 18px;
  padding: 10px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div-link">
  <span class="txt-block">Yandex</span>
  <span class="wrapper-link"><a class="link" href="https://yandex.ru/">Подробнее</a></span>
</div>
<div class="div-link">
  <span class="txt-block">Google</span>
  <span class="wrapper-link"><a class="link" href="https://google.com/">Подробнее</a></span>
</div>

БЛОГ НА HUSL

Как с помощью jQuery скопировать ссылку и применить ее к текстовому блоку

Ответы (1 шт):