Wie fügt man Links zu Bildern in HTML dynamisch mit JS hinzu?

Question

Ich habe 50 Divs wie die unten, und das Bild ist nicht anklickbar. Ich möchte das Bild klickbar machen, abhängig davon, welche Verknüpfung das div enthält: es ist immer der href-Link im article_title-Tag.

Wie kann ich dies mit nur ein paar Zeilen JavaScript erreichen?

Ich dachte daran, eine ID zu jedem img-Tag manuell hinzuzufügen, und dann getElementById zu verwenden und etwas Magie zu machen, aber das würde zu lange dauern.

<div class="col-md-4 article"> 
     <img src="7tips.jpg" alt="Canary Wharf" title="7 Tips For Lasting In Your Career" width="324" height="235"> 
     <div class="article_category"> 
     <a href=”http://www.canarywharfian.co.uk/forums/wealth-management/”>Wealth Management</a> 
     </div> 
     <div class="article_meta"> 
     <h1 class="article_title"><a href="http://www.canarywharfian.co.uk/threads/7-tips-for-lasting-in-your-career.242/" rel="bookmark" title="7 Tips For Lasting In Your Career">7 Tips For Lasting In Your Career</a></h1> 
     <div class="col-md-6 author_date"><a href="http://www.canarywharfian.co.uk/members/smallcappm.1140/">SmallCapPM</a> - <span class="date"> Mar 10, 2016</span></div> 
     <div class="article_abstract"> 
      Many of you are hoping and planning for a long and successful career in finance... 
     </div> 
     </div> 
    </div> 

Answer 1

Vielleicht (mit jQuery):

<script> 
    $(document).ready(function() { 
     $('.block').each(function(index, value) { 
      let href = $(this).find('a[href]').attr('href'); 
      $(this).find('img').wrap('<a href=' + href + '></a>'); 
     }); 
    }); 
</script> 

Answer 2

wenn Sie jQuery verwenden, können Sie einfach die Bilder mit dem Element gewickelt wird.

$(function(){ 
 
    // traversing all the images 
 
    $('img').each(function(){ 
 
    // get the link by finding from parent 
 
    var link = $(this).parent().find('.article_title a').attr('href'); 
 
    // replace the image with link + image 
 
    $(this).replaceWith('<a href="' + link + '">' + $(this)[0].outerHTML + '</a>'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
 
<div class="col-md-4 article"> 
 
     <img src="http://www.canarywharfian.co.uk/7tips.jpg" alt="Canary Wharf" title="7 Tips For Lasting In Your Career" width="324" height="235"> 
 
     <div class="article_category"> 
 
     <a href="http://www.canarywharfian.co.uk/forums/wealth-management/">Wealth Management</a> 
 
     </div> 
 
     <div class="article_meta"> 
 
     <h1 class="article_title"><a href="http://www.canarywharfian.co.uk/threads/7-tips-for-lasting-in-your-career.242/" rel="bookmark" title="7 Tips For Lasting In Your Career">7 Tips For Lasting In Your Career</a></h1> 
 
     <div class="col-md-6 author_date"><a href="http://www.canarywharfian.co.uk/members/smallcappm.1140/">SmallCapPM</a> - <span class="date"> Mar 10, 2016</span></div> 
 
     <div class="article_abstract"> 
 
      Many of you are hoping and planning for a long and successful career in finance... 
 
     </div> 
 
     </div> 
 
    </div>

Answer 3

Per Ihr Tag von vanila Javascript, was Sie tun können, ist zu suchen und alle Ihre article s zwischenzuspeichern. Suchen Sie in jedem Artikel nach Anker innerhalb Ihres Titels und setzen Sie seinen href auf einen neu erstellten Anker. Hängen Sie das Bild an den neu erstellten Anker an und fügen Sie es Ihrem Artikel hinzu.

Ein einfaches Beispiel (H1 font-size für Demo reduziert):

var articles = document.getElementsByClassName('article'); 
 

 
[].forEach.call(articles, function(article) { 
 
\t var image = article.querySelector('img:first-child'); 
 
\t var title = article.querySelector('h1.article_title > a'); 
 
\t var anchor = document.createElement('a'); 
 
\t anchor.href = title.href; 
 
\t anchor.appendChild(image); 
 
\t article.insertBefore(anchor, article.firstChild); 
 
});

h1 { font-size: 12px; }

<div class="col-md-4 article"> 
 
     <img src="//placehold.it/120x64" alt="Canary Wharf" title="7 Tips For Lasting In Your Career"> 
 
     <div class="article_category"> 
 
     <a href="example.com">Wealth Management</a> 
 
     </div> 
 
     <div class="article_meta"> 
 
     <h1 class="article_title"><a href="//bing.com" rel="bookmark" title="7 Tips For Lasting In Your Career">7 Tips For Lasting In Your Career</a></h1> 
 
     <div class="col-md-6 author_date"><a href="example.com">SmallCapPM</a> - <span class="date"> Mar 10, 2016</span></div> 
 
     <div class="article_abstract"> 
 
      Many of you are hoping and planning for a long and successful career in finance... 
 
     </div> 
 
     </div> 
 
</div> 
 
<hr/> 
 
<div class="col-md-4 article"> 
 
     <img src="//placehold.it/120x64" alt="Canary Wharf" title="7 Tips For Lasting In Your Career"> 
 
     <div class="article_category"> 
 
     <a href="example.com">Wealth Management</a> 
 
     </div> 
 
     <div class="article_meta"> 
 
     <h1 class="article_title"><a href="//google.com" rel="bookmark" title="7 Tips For Lasting In Your Career">7 Tips For Lasting In Your Career</a></h1> 
 
     <div class="col-md-6 author_date"><a href="example.com">SmallCapPM</a> - <span class="date"> Mar 10, 2016</span></div> 
 
     <div class="article_abstract"> 
 
      Many of you are hoping and planning for a long and successful career in finance... 
 
     </div> 
 
     </div> 
 
</div>

Hinweis, wie die Links zu Google und Bing wird von dem Titel Anker aufgenommen und in eine einge neuer Anker, der die Bilder einhüllt.