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

Posted 2023-05-09

【中文标题】jQuery 属性名称选择器中的通配符？

【英文标题】：Wildcards in jQuery attribute's name selector?

【发布时间】：2019-02-07 02:06:48

【问题描述】：

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

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

我尝试过但失败了：

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

【参考方案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>

【讨论】：

此示例中还有一个限制，如果您想排除后者，则无法区分data-my-foo 和data-myfoo。但如果你能保证后者永远不会发生，那么这个例子就可以很好地为你服务。

【参考方案2】：

属性名称没有通配符。所以你可以得到如下结果

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

【参考方案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>