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

我遇到一些麻煩數據的屬性，我不能得到任何出於某種原因，所以我必須做一些錯誤：如何獲取，設置和選擇具有數據屬性的元素？

集：

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

這是否有所作爲？

得到：

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

選擇：

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

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

來源

2012-11-07 Thaiscorpion

可能與http://stackoverflow.com/questions/13094777/find-elements逐定製數據屬性值/ 13094850＃13094850。 – pimvdb

[你不需要在JavaScript中設置'[data - *]'屬性]（http://stackoverflow.com/questions/7261619/jquery-data-vs-attr/7262427#7262427）。 – zzzzBov

所有的答案都正確，但我想陳述其他人沒有做過的事情。
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)')

來源

2012-11-07 18:46:31

這是我的問題的一部分來自我認爲我實際上正在尋找只是使用屬性，而不是數據的方式，我沒有這個問題，謝謝gion！ – Thaiscorpion

請參閱更新請 –

感謝gion，答案非常完整，涵蓋了所有內容 – Thaiscorpion

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

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

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

來源

2012-11-07 18:29:53 undefined

我剛剛在這個組成的例子中使用了一個id選擇器，我正在使用一個類選擇器。我會檢查過濾功能，謝謝你的幫助。 – Thaiscorpion

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

來源

2012-11-07 18:31:53

我認爲使用attr（）對我來說是最好的方式，因爲它現在可以工作。 – Thaiscorpion

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

來源

2012-11-07 18:34:14 micadelli

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

回答

相關問題