доступ $ .data() внутри селектора

Question

У меня есть следующий код:

<img class="sth" data-number="1" src="sth.jpg" alt=""> 

Есть несколько таких элементов, и все они отличаются только в данных чисел. Я хочу сделать следующее для всех элементов:

$('.sth').attr('src', 'sth' + data('number') + '.jpg'); 

так, чтобы каждое изображение меняло src своим собственным числом.

Однако данные ('number') не работают, а $ ('. Sth'). Data ('number') изменяет все с помощью sth1.jpg.

Есть ли способ сделать это?

Answer 1

Да, с помощью функции JQuery each() следующим образом:

$('.sth').each(function(){ 
    $(this).attr('src', 'sth' + $(this).data('number') + '.jpg'); 
}); 

Какой будет выполняться на каждом элементе согласованного селектором .sth.

Answer 2

Вы можете сделать это с помощью attr() функции

$('.sth').attr('src', function(){ 
    return 'sth' + $(this).data('number') + '.jpg'; 
});