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

jQuery - Displaying each image link below it

本文关键字：图像 链接 下方显示 jQuery      更新时间：2023-09-26

首先是小提琴。

我正在尝试使用 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);

网页代码：

<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>

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

我建议：

$('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() .

试试这段代码：

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

任何可能的疑问，请随时询问。

希望对您有所帮助。

相关文章：