Как перебрать значения атрибутов на странице?

$('a.popup-ajax').popover({ "html": true, "content": function(){ $.ajax({ url: '/heroespage', dataType: 'json', success: function(response){ var title = $("a.popup-ajax").attr("data-heroid"); console.log(response[title]['id']); var name = response[title]['name']; var role = response[title]['role']; var img = response[title]['img']; var typeAttack = response[title]['typeAttack']; $("a.popup-ajax").attr('data-content', '

'+ name +'

'+ typeAttack+'

'+ role +'

'); } }) } });
Здесь я беру значение атрибута:
var title = $("a.popup-ajax").attr("data-heroid");
там хранится id, соответственно потом этот id подставляется в response[title] и выводится нужная мне инфа. Все хорошо, когда атрибут data-heroid один на странице, но если их несколько, то берется значение только первого. Как переделать код, чтобы он брал значения каждого элемента на который я навожу?

Ответ

https://getbootstrap.com/docs/4.1/components/popovers/
content ... If a function is given, it will be called with its this reference set to the element that the popover is attached to. content ... функция вызывается в контексте (this) элемента, к которому прикреплен popover
$('a.popup-ajax').popover({ "html": true, "content": function(){ var element = this; // !!! $.ajax({ url: '/heroespage', dataType: 'json', success: function(response){ var title = $(element).attr("data-heroid"); // !!! console.log(response[title]['id']); var name = response[title]['name']; var role = response[title]['role']; var img = response[title]['img']; var typeAttack = response[title]['typeAttack']; /* !!! */$(element).attr('data-content', '

'+ name +'

'+ typeAttack+'

'+ role +'

'); } }) } });