如何獲取，設置和選擇具有數據屬性的元素？

Question

我遇到一些麻煩數據的屬性，我不能得到任何出於某種原因，所以我必須做一些錯誤：

集：

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

這是否有所作爲？

得到：

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

選擇：

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

沒有這個工作對我來說，我在這做起來還是怎麼回事？

Answer 1

所有的答案都正確，但我想陳述其他人沒有做過的事情。
jQuery data方法的作用類似於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 methos）的getter和setter方法：

$('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)') 

Answer 2

您正在使用的ID選擇，所以沒有必要使用屬性選擇，因爲數據是一個屬性，並使用data方法（不ATTR方法）使用屬性選擇，你不能選擇的元素，要設置它，如果你要選擇的元素，只有當它有data1 === 1可以使用filter方法：

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

dataset：允許訪問，無論是在閱讀和寫作模式，所有的自定義數據屬性（數據並行*）集元素上。它是DOMString的映射，每個自定義數據屬性都有一個條目。

Answer 3

爲了反映屬性的值立即在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 4

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