1

Всем привет.

Есть несколько страниц, с подобным кодом, дабы не мучится и не проставлять везде ссылки, я решил использовать для этого 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>
0

1 ответ 1

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>

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.