Jquery - получить ссылку, и обвернуть img

271

13 июля 2017, 01:10

Всем привет.

Есть несколько страниц, с подобным кодом, дабы не мучится и не проставлять везде ссылки, я решил использовать для этого jquery (Надеюсь подводных камней в браузерах при таком подходе не возникнет)

Что нужно ? Нужно взять ссылку из верхнего дива, и обернуть в тег a href картинку, которая находится дивом ниже. Т.е в результате мы получаем кликабельный заголовок, и картинку. Но я не знаю jquery и поэтом обращаюсь к вам, за решением данной проблемы.

Вот пример кода

<div class="col-md-12"><a class="test1" href="http://www.site.com/bla">Test Link</a></div>
<div class="col-md-12 description"><img class="left" src="http://www.site.com/images/image_test.jpg" alt="Test" />t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English</div>
<div class="col-md-12"><a class="test1" href="http://www.site.com/bla">Test Link</a></div>
<div class="col-md-12 description"><img class="left" src="http://www.site.com/images/image_test.jpg" alt="Test" />t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English</div>

Answer 1

$('.description').each(function() { 
  var href = $(this).prev('div').find('a').attr('href'); 
  $(this).find('img').wrap('<a href="'+href+'" />'); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="col-md-12"><a class="test1" href="http://www.site.com/bla">Test Link</a></div> 
<div class="col-md-12 description"><img class="left" src="http://www.site.com/images/image_test.jpg" alt="Test" />t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English</div> 
 
<div class="col-md-12"><a class="test1" href="http://www.site.com/bla">Test Link</a></div> 
<div class="col-md-12 description"><img class="left" src="http://www.site.com/images/image_test.jpg" alt="Test" />t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English</div>