Как правильно получить data-атрибут родительского контейнера нажатой кнопки?

Question

[Алексей Скляров]

Есть контейнер .svg-map, в котором находится svg-документ с местами концертного зала. Сами места в документе рисуются через circle.

Таких контейнеров .svg-map у меня 4 штуки, они все одинаковые, меняется лишь svg-документ, который в этом контейнере находится, следовательно и обрабатываться они должны по-разному.
Сейчас клик по месту в зале я получаю так, присваиваю ему класс checked:

$('.svg-map > svg circle').on('click',function(){
        $(this).toggleClass('checked');
      })

Этот код для всех 4х контейнеров с картами.

Вопрос такой: как грамотно получить data-атрибут у контейнера .svg-map, в котором был нажат кружок, то есть чтобы при клике в любом из 4х контейнеров мне выводился data-category непосредственно того контейнера, в котором я работаю?

Пример кода:

<div class="svg-map" data-category="vip">
									<svg>
										<circle></circle>
										<circle></circle>
										<circle></circle>
									</svg>
								</div>
								<div class="svg-map" data-category="balcony">
									<svg>
										<circle></circle>
										<circle></circle>
										<circle></circle>
									</svg>
								</div>

Answer 1

[0xD34F]

$(this).closest('[data-category]').attr('data-category');

Comments

[Саша]

0xD34F .closest() быстрее отрабатывает, чем .parents() ?

[0xD34F]

Саша: https://jsperf.com/jquery-parents-vs-closest.

[Саша]

0xD34F: весомо)
спасибо!

Answer 2

[Никита Ермиличев]

Если вложенность неизменна:

$(this).parent().parent().attr('data-category');

Еще можете указывать data-id родительскому блоку и data-parent-id дочерним