Совпадение значений атрибутов данных через запятую

Question

Нужно добавить класс ко всем дочерним меню, если наведите курсор на его родительское меню.

У меня есть код для добавления некоторого класса в дочернее меню, если я наведите курсор на родительское меню с помощью data-id.И это работает.Но дочернее меню может иметь несколько значений родительского идентификатора данных (data-id = "3,2). И мне нужно добавить класс, если я наведите курсор на всех его родителей.

$('.menu__list li a[data-id]').hover(function() {
  $('.menu__subcategory li a').addClass('inactive').removeClass('child');
  $('.menu__subcategory li a[data-id=' + $(this).attr('data-id') + ']').addClass('child').removeClass('inactive');
}, function() {
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu__list">
  <li><a href="#" data-id="1">Menu 1</a></li>
  <li><a href="#" data-id="2">Menu 2</a></li>
  <li><a href="#" data-id="3">Menu 3</a></li>
</ul>

<ul class="menu__subcategory">
  <li><a href="#" data-id="1">Submenu 1</a></li>
  <li><a href="#" data-id="2">Submenu 1</a></li>
  <li><a href="#" data-id="2">Submenu 1</a></li>
  <li><a href="#" data-id="3,2">Submenu 1</a></li>
</ul>

необходимо добавить класс, если я наведите курсор на все дочернее меню с несколькими значениями идентификатора данных

Answer 1

Попробуйте с кодом ниже

$(".menu__subcategory > li a[data-id]").each(function(){
  console.log($(this).attr('data-id'));
});

$(".menu__list > li a[data-id]").each(function(){
  console.log($(this).attr('data-id'));
});

Для перебора всех атрибутов data-id используйте это:

$("a[data-id]").each(function(){
  console.log($(this).attr('data-id'));
});  

Answer 2

Чтобы сделать это, вы можете преобразовать значения, хранящиеся в атрибуте data, в массивы.Затем в функции hover() вы можете использовать filter(), чтобы определить, является ли массив id подкатегорий includes() родительским значением, которое было найдено.Попробуйте это:

$('.menu__list li a[data-id]').hover(function() {
  var $aHover = $(this);
  $('.menu__subcategory li a').addClass('inactive').removeClass('child').filter(function() {
    return $(this).data('id').includes($aHover.data('id'));
  }).addClass('child').removeClass('inactive');
}, function() {
  // presumably you've omitted some logic here, or this can be removed.
});

.child {
  background-color: yellow;
}

.inactive {
  background-color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu__list">
  <li><a href="#" data-id="1">Menu 1</a></li>
  <li><a href="#" data-id="2">Menu 2</a></li>
  <li><a href="#" data-id="3">Menu 3</a></li>
</ul>

<ul class="menu__subcategory">
  <li><a href="#" data-id="[1]">Submenu 1</a></li>
  <li><a href="#" data-id="[2]">Submenu 1</a></li>
  <li><a href="#" data-id="[2]">Submenu 1</a></li>
  <li><a href="#" data-id="[3,2]">Submenu 1</a></li>
</ul>