оберните изображение следующей ссылкой

Question

Я работаю над слайд-шоу для предстоящих событий. Слайды должны ссылаться на соответствующую страницу событий. Но не все слайды предполагают наличие ссылки, если у них нет страницы событий.

Вот HTML я могу вывести:

<ul> 
    <li><img><a href="/link1">link1</a></li> 
    <li><img><a href="/link2">link2</a></li> 
    <li><img></li> // this one doesn't have a link 
</ul> 

Затем с JQuery Я пытаюсь изменить этот HTML выглядеть следующим образом:

<ul> 
    <li><a href="/link1"><img></a></li> 
    <li><a href="/link2"><img></a></li> 
    <li><img></li> // this one doesn't have a link 
</ul> 

Вот JQuery я «ве работает на:

$(function() { 

    $(' ul li img').each(function() { // For each image 

     if($(' ul li img').next('a').attr("href").length) // check if banner has a link 

     var a = $(this).next('a').attr("href"); // Find its associated anchor and give a name 

     $(' ul li img').wrap('<a href="' + a + '"></a>'); // And wrap the image 

     return false; 

}); 

Это только кажется, чтобы сделать первый HREF и обернуть каждое изображение с тем же HREF.

Answer 1

$(' ul li img') возвращает массив, поэтому в .each(funtion(){}) вы должны использовать $(this), который возвращает текущий img в массиве.

Вы код должен выглядеть следующим образом:

$(' ul li img').each(function() { // For each image 
    var $a = $(this).next('a').attr("href"); 
    if($a.length){ // check if banner has a link 
    $(this).wrap('<a href="' + $a + '"></a>'); // And wrap the image 
    } 
}); 

Не тестировалось.

Answer 2

Вместо того, чтобы использовать <a href ...> и обернуть его позже, я предлагаю предоставить атрибут данных вашему изображению, проверить его, а если есть, добавьте прослушиватель событий для ссылки на предполагаемую страницу.

var images = document.getElementsByTagName('img'); 
 
for (var i = 0; i<images.length; i++) { 
 
    if (images[i].getAttribute('data-link')) { 
 
     images[i].addEventListener('click',function(){ 
 
      /* this is what you want to do: 
 
      window.location.href=this.getAttribute('data-link'); */ 
 
      // just for the effect here: 
 
      alert(this.getAttribute('data-link')); 
 
     }); 
 
    } 
 
}

<ul> 
 
    <li><img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" data-link="http://www.google.com"></li> 
 
    <li><img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/286.jpg" data-link="http://www.twitter.com"></li> 
 
     <li><img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/138.jpg"></li> 
 
</ul>