jQuery中有没有办法选择所有具有“data-*”属性名称的元素答案

【问题标题】：Is there a way in jQuery to select all elements with "data-*" attribute namejQuery中有没有办法选择所有具有“data-*”属性名称的元素
【发布时间】：2014-05-30 12:58:06
【问题描述】：

在 jQuery 中有没有办法选择所有带有“data-*”属性名称的元素。

<div data-user="1">
    <span data-name="Richard"></span>
    <label></label>
</div>

就像上面的示例 HTML 一样，我想选择 data-user 和 data-name 元素。问题是“data-”属性可以是任何东西（如 data-abc），这就是为什么我要选择带有“data-*”的属性。我查看了所有 jQuery 属性选择器，但找不到任何我需要的东西。我不能使用 contains，因为元素内的文本可能有 data- 前缀。

【问题讨论】：

Wildcards in jQuery selectors 的可能重复项
不是重复的，那是另一个问题
好问题，但我认为答案是否定的（尽管您似乎从不懂问题的人那里得到了所有虚假的答案）
jQuery attribute name contains的可能重复
谢谢斯蒂芬。我将“属性”更新为“属性名称”以进一步阐明问题的意图。

标签： jquery html

【解决方案1】：

除了你已经排除的属性选择器之外，jQuery 并没有这样的方法。
您必须过滤或制作自己的方法，如下所示：

jQuery.extend(jQuery.expr[':'], { 
    data: function(el) { 
        return !jQuery.isEmptyObject( $(el).data() );
    }    
});

可以像这样使用

$('*:data')
$('div:data')
$('.class:data')

等等。并仅返回具有关联数据的元素

FIDDLE

【讨论】：

@StephenThomas - 那么 OP 在问什么？
“我不能使用 contains，因为元素内的文本可能有 data- 前缀。”
@StephenThomas - 我认为问题是“在 jQuery 中有没有办法选择所有具有“data-*”属性的元素。”，OP 不能做什么不是很相关？
其实，我认为你是对的。我撤回我的评论
@StephenThomas - 我也认为我是对的，但我不确定，这就是我问的原因？

【解决方案2】：

这是一些普通的 HTML5：

Array.prototype.filter.call(
   document.querySelectorAll("body *"), 
   function(node) { 
      return Object.keys(node.dataset).length > 0;
   }
)

还有一些 jQuery：

$("body *").filter(
   function() { 
      return !$.isEmptyObject(this.dataset) 
    }
)

【讨论】：

我其实想使用数据集，但它只适用于 IE11+。
是的，我跳过了 HTML5 标签。

【解决方案3】：

请参阅有关 Attribute Contains Selector 的 JQuery API 文档。 Thias 应该可以帮助您入门。

【讨论】：

没有。这没有帮助。该链接是关于属性值的，并且 OP 正在询问属性名称我不会拒绝投票答案但其他人可能会，所以你可能想删除你的答案

【解决方案4】：

我认为这个问题没有简单的解决方案。我要做的是

//Get all the elements in the document and filter those that have data-* attribute

$('*').filter(function() {
   var attrs = this.attributes; //get the attributes array-like object for each DOM element

   for (var i=0, len=attrs.length; i<len; i++) {
     var attr = attrs[i];
     if (attr.name.match(/^data-/)) {
       return true;
     }
  }
});

我对此进行了测试，它确实有效。

【讨论】：

【解决方案5】：

您可以遍历所有 DOM 元素，只找到带有数据元素的元素...

var i, max, all = document.getElementsByTagName("*");

for ( i=0, max=all.length; i < max; i++ ) {
    // Do something with the element here
    var data = $( all[i] ).data();
    if( !$.isEmptyObject( data ) ){
        //if you find a non-empty object, the element has a data-* attribute, do something with it.
        console.log( data );
    }
}

【讨论】：