Подстановочные знаки в селекторе имени атрибута jQuery?

Question

Как выбрать все элементы, которые содержат атрибуты данных, начиная с «data-my-» в следующем коде? Я не собираюсь добавлять подстановочные знаки к значению атрибута, это имя атрибута.

<p data-my-data="aa">foo</p>
<p data-my-info="bb">bar</p>

Что я попробовал и потерпел неудачу:

$("[data-my-*]").addClass("myClass");

Answer 1

здесь нет подстановочных знаков для имен атрибутов. Поэтому вы можете получить результат, как показано ниже

$( "p" ).each(function( i ) {
    element=this;
    $.each(this.attributes, function() {
       if(this.name.indexOf('data-my-') != -1) $(element).addClass("myClass");
    });
});

Answer 2

Просто немного короче, но в остальном очень похож на версию @ BoltClock's.

Примечание: с использованием синтаксиса ES6.

$('p')
  .filter((_, el) => Object.keys($(el).data()).find(dataKey => dataKey.indexOf('my') === 0))
  .addClass('myClass');

.myClass { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p data-my-data="aa">foo</p>
<p data-my-info="bb">bar</p>
<p>baz</p>

Answer 3

Вы не можете написать селектор с подстановочными знаками для имен атрибутов. Нет синтаксиса для этого в стандарте и в jQuery.

Не существует очень эффективного способа получить только те элементы, которые вы хотите, без циклического прохождения каждого элемента в DOM. Лучше всего, чтобы у вас был какой-то другой способ сузить ваш выбор до элементов, которые, скорее всего, имеют эти атрибуты данных в пространстве имен, и изучить только эти элементы, чтобы уменьшить накладные расходы. Например, если мы предполагаем, что только p элементы имеют эти атрибуты (конечно, вам может потребоваться изменить это для соответствия вашей странице):

$("p").each(function() {
  const data = $(this).data();
  for (const i in data) {
    if (i.indexOf("my") === 0) {
      $(this).addClass("myClass");
      break;
    }
  }
});

.myClass {
  color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p data-my-data="aa">foo</p>
<p data-my-info="bb">bar</p>
<p>baz</p>