我在使用数据属性时遇到了麻烦,由于某种原因我无法使任何东西正常工作,所以我必须做错了事:
设置:
$('#element').data('data1', '1'); //Actually in my case the data is been added manually
有什么不同吗?
获取:
$('#element').data('data1');
选择:
$('#element[data1 = 1]')
这些都不适合我,我是要化妆还是怎么样?
所有答案都是正确的,但我想说明别人没有做过的事情。jQuery data
方法的作用类似于html5数据属性的获取器,但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
方法)作为获取器和设置器:
$('selector').attr('data-' + key, value);
或者您可以使用自定义表达式来过滤jQuery内部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)')
我知道这个线程已经使用了几年了,但是由于它具有一定的活动性,因此值得一提的是,使用querySelector
dom API(不需要jQuery)进行此操作非常简单:
document.querySelectorAll('[attribute=value]')
要立即在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
// Set
$('#element').attr('data-value', 'value');
// Get
var value = $('#element').attr('data-value');
// Select
var elem = $('#element[data-value = "' +value+ '"]');
您正在使用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的映射,每个自定义数据属性都有一个条目。