Question

首先是fiddle。

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

Javascript代码：

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

HTML code：

<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()。

Answer 2

试试这段代码：

$('img').each(function(){
    var link = $(this).attr('src');
    $('<div><a href="' + link + '">Text</a></div>').insertAfter(this);
});

任何可能的疑惑，随时问。

希望它有所帮助。

jQuery - 显示它下面的每个图像链接

2 个答案: