jquery - jQuery : add specific attr to each image

Question

有一个循环(在我的画廊脚本中)导致我的结果如下:

        <div class="gallery">
            <a href="uploads/rep2.png">
             <img src="uploads/rep2-150x110.png" class="thumbnail">
            </a>
        </div>
        <div class="gallery">
            <a href="uploads/rep1.png">
             <img src="uploads/rep1-150x110.png" class="thumbnail">
            </a>
        </div>
        <div class="gallery">
            <a href="uploads/rep2.png">
             <img src="uploads/rep2-150x110.png" class="thumbnail">
            </a>
        </div>

我想向此循环中的每个图像添加特定的属性(即每个链接的“href”)。必须是:

        <div class="gallery">
            <a href="uploads/rep2.png">
             <img data-img="uploads/rep2.png" src="uploads/rep2-150x110.png" class="thumbnail">
            </a>
        </div>
        <div class="gallery">
            <a href="uploads/rep1.png">
             <img data-img="uploads/rep1.png" src="uploads/rep1-150x110.png" class="thumbnail">
            </a>
        </div>
        <div class="gallery">
            <a href="uploads/rep2.png">
             <img data-img="uploads/rep2.png" src="uploads/rep2-150x110.png" class="thumbnail">
            </a>
        </div>

我写了这段代码:

$('.thumbnail').each(function() {
var $this = $('.gallery a'),
href = $this.data('href'); 
$('.thumbnail').attr('data-img', href);
        });

但不起作用。感谢您的帮助。

Answer 1

关闭，但您需要在每个回调中使用 this。

首先获取 gallery 中的所有 a 标签，找到它们的 href，将其应用于作为子标签的 img 标签。

$('.gallery a').each(function() {
   href = $(this).attr('href');
   $(this).find("img").attr('data-img', href);
});

这里的关键技巧是 each() 将 this 变量设置为每个回调迭代的元素。