Question

jQuery中是否有一种方法可以选择具有“data- *”属性名称的所有元素。

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

与上面的示例HTML一样，我想选择数据用户和数据名称元素。问题是“data-”属性可以是任何东西（比如data-abc），这就是我想用“ data - * ”选择属性的原因。我查看了所有jQuery属性选择器，无法找到满足我需要的任何东西。我不能使用contains，因为元素内的文本可能有数据前缀。

Answer 1

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

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

可以像

一样使用

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

等。并仅返回包含与之关联的数据的元素

FIDDLE

Answer 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) 
    }
)

Answer 3

请参阅有关Attribute Contains Selector的JQuery API文档。 Thias应该让你开始。

Answer 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;
     }
  }
});

我对此进行了测试并且有效。

Answer 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 );
    }
}

在jQuery中是否有一种方法可以选择具有“data- *”属性名称的所有元素

5 个答案: