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的版本非常相似。

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

您不能为属性名称编写带有通配符的选择器。 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>

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

3 个答案: