jquery - 如何获取、设置和选择具有数据属性的元素？

Question

我在数据属性方面遇到了一些问题，由于某种原因我无法正常工作，所以我一定是做错了什么：

放：

$('#element').data('data1', '1'); //Actually in my case the data is been added manually 

这有什么区别吗？

得到：

$('#element').data('data1');

选择：

$('#element[data1 = 1]')

这些都不适合我，是我编造的还是怎么回事？

Answer 1

所有的答案都是正确的，但我想说明一些其他人没有做过的事情。
jQuerydata方法的作用类似于 html5 数据属性的 getter，但 setter 不会改变 data-* 属性。
因此，如果您手动添加数据（如您的评论中所述），那么您可以使用 css 属性选择器来选择您的元素：

$('#element[data-data1=1]')  

但是如果您通过 jQuery 添加（更改）数据，则上述解决方案将不起作用。
这是此失败的示例：

var div = $('<div />').data('key','value');
alert(div.data('key') == div.attr('data-key'));// it will be false  

所以解决方法是通过检查 jQuery 数据值以匹配所需的值来过滤集合：

// replace key & value with own strings
$('selector').filter(function(i, el){
    return $(this).data('key') == 'value';
});

因此，为了克服这些问题，您需要使用 html5 数据集属性（通过 jQuery 的attr方法）作为 getter 和 setter：

$('selector').attr('data-' + key, value);

或者您可以使用过滤 jQuery internal 的自定义表达式data：

$.expr[':'].data = function(elem, index, m) {
    // Remove ":data(" and the trailing ")" from the match, as these parts aren't needed:
    m[0] = m[0].replace(/:data\(|\)$/g, '');
    var regex = new RegExp('([\'"]?)((?:\\\\\\1|.)+?)\\1(,|$)', 'g'),
    // Retrieve data key:
    key = regex.exec( m[0] )[2],
    // Retrieve data value to test against:
    val = regex.exec( m[0] );
    if (val) {
        val = val[2];
    }
    // If a value was passed then we test for it, otherwise we test that the value evaluates to true:
    return val ? $(elem).data(key) == val : !!$(elem).data(key);
};

并像这样使用它：

$('selector:data(key,value)')

更新

我知道这个线程已经有几年的历史了，但由于它有一些活动，值得一提的是，使用querySelectordom API（不需要 jQuery）执行此操作非常简单：

document.querySelectorAll('[attribute=value]')

Answer 2

要立即在 DOM 中反映属性的值，您可以使用.attr()

$('#element').attr('data-data1', '1');  // Sets the attribute

$('#element[data-data1="1"]') // Selects the element with data-data1 attribute'

$('#element').data('data1'); // Gets the value  of the attribute

$('#element').attr('data-data1'); // Gets the value  of the attribute

用纯 Javascript 你可以试试这个

var elem = document.getElementById('element');

elem.setAttribute('data-data1', '1'); // Set the attribute

elem.getAttribute('data-data1'); // Gets the attribute

Answer 3

// Set
$('#element').attr('data-value', 'value');
// Get
var value = $('#element').attr('data-value');
// Select
var elem = $('#element[data-value = "' +value+ '"]');

Answer 4

您正在使用 ID 选择器，因此无需使用属性选择器，因为数据是一个属性并且您使用data方法（而不是 attr 方法）设置它，如果您只想选择元素，则无法使用属性选择器选择元素它有data1 === 1你可以使用的filter方法：

(function($){
    $(function(){
       // ...
       $('#element').filter(function() {
          return this.dataset.data1 == 1
          // return $(this).data('data1') == 1
       })
    })
})(jQuery);

dataset：允许在读取和写入模式下访问元素上设置的所有自定义数据属性（data-*）。它是 DOMString 的映射，每个自定义数据属性都有一个条目。