jQuery 属性名称选择器中的通配符？

Question

如何在以下代码中 select 所有包含以 "data-my-" 开头的数据属性的元素？ 我不会在属性值中添加通配符，它是属性的名称。

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

我尝试过但失败了：

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

Answer 1

您不能为属性名称编写带有通配符的选择器。 There isn't a syntax for that in the standard，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>

Answer 2

属性没有通配符names.so你可以得到如下结果

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

Answer 3

与@BoltClock 的版本略短，但在其他方面非常相似。

注意：使用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>

jQuery 属性名称选择器中的通配符？

Wildcards in jQuery attribute's name selector?

html

javascript

jquery

dom

jquery-selectors