javascript - jQuery - 在其下方显示每个图像链接

Question

首先是fiddle .

我正在尝试使用 jQuery 在它们旁边显示图像 url。我试过使用属性选择器，但它会将第一个图像 url 添加到所有图像。

Javascript 代码:

$("img").after("<div><a href='http://google.com/'>Text </a></h1></div>");
$img_url = $('img').attr('src');
$("img").after( $img_url);

HTML代码:

<div class="main-container">
     <ul>
        <li>
          <img src="http://img.netzwelt.de/dw677_dh381_sw1920_sh1080_sx0_sy0_sr16x9_nu0/picture/original/2016/01/hoechst-dynamische-frontpartie-tagfahrleuchten-thors-hammer-design-ab-sommer-2016-gibt-neuen-s90-volvo-haendlern-178603.jpeg">
        </li>
        <li>
          <img src="http://www.motoroids.com/wp-content/uploads/2015/01/Volvo-Concept-Coupe-300x300.jpg">
        </li>
        <li>
          <img src="http://www.motoroids.com/wp-content/uploads/2015/05/Volvo-XC90-India-launch-4-300x300.jpg">
        </li>
      </ul>
    </div>

某种循环应该有助于实现这一点，但不确定具体是如何实现的。任何帮助，将不胜感激。

Answer 1

我建议:

$('img').after(function(){
  // this, here, refers to the <img> element in the
  // jQuery collection:
  return '<div><a href="' + this.src + '">' + this.src + '</a></div>';
});

引用资料:

• > after() .