jQquery: добавить конкретный атрибут для каждого изображения

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 в каждом обратном вызове.

Сначала возьмите все теги a в галерее, найдите их href, примените это к тегу img, который является дочерним.

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

Ключевой трюк в том, что each() устанавливает переменную this в элемент, повторяемый для каждого обратного вызова.

Answer 2

var $this = $('.gallery a');

возвращает массив (все элементы a, содержащие .gallery). Попробуйте следующее:

$('.gallery img').each(function(){
    $(this).attr('data-img', $(this).parent().attr('href'));
});

Это перейдет к каждому img и даст ему атрибут data-img со значением, содержащим a s href.

РЕДАКТИРОВАТЬ : Как указано в комментарии ниже, вы, вероятно, хотите, чтобы изображения были только в div галереи, поэтому вам следует использовать селектор $('.gallery img') или $('.gallery .thumbnail') (если нет миниатюр изображения, которые вы хотите пропустить).

Answer 3

Попробуйте,

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

$('.gallery a') => это просто получает все теги a, и вы, вероятно, получите тот же href

Answer 4

Attr может принимать функцию, которая будет возвращать новое значение:

$('.thumbnail').attr("data-img", function() {
    return this.parentNode.getAttribute("href");
});

Answer 5

Попробуйте это:

$(".gallery").each(function(index, value) {
    $("img", $(value)).attr("data-img", $("a", $(value)).attr("href"));
});