Question

如何访问JQuery元素。

我创建元素：

var el = $('<div></div>');

$.data(el, 'data', {first: 'first'});

$('body').append(el);

我可以阅读数据：

$.data(el, 'data').first

但我需要通过HTML标签或类阅读：

$.data('div', 'data').first

有可能吗？

JSFIDDLE

谢谢！

Answer 1

如果我正确地关注您，请在jQuery对象本身上使用数据API：

$('div').first().data()

Answer 2

根据最终目标，我可以将变量保存在您的javascript中，或者在div中添加其他数据属性以便以后轻松选择。

所以你可以做到

$('<div />', { 'data-has-data': 'true' }).data({ first: 'first' }).appendTo('body');

然后你可以稍后再做

$('div[data-has-data]').data().first

或者你可以做到

var el = $('<div />').data({ first: 'first' }).appendTo('body');

// to access later
var firstData = el.data().first;

Answer 3

首先要小心你如何使用jQuery.data函数，因为它是一个低级方法。它不是设计用于jQuery元素，而是原始DOM元素。根据{{3}}，element期望 DOM 元素与数据相关联。我强调DOM，因为您将jQuery而不是相应的DOM元素传递给$.data：

var el = $('<div></div>');
$.data(el, 'data', {first: 'first'});

您应该传递实际的DOM元素：

$.data(el[0], 'data', {first: 'first'})

然后，您可以通过多种方式恢复data字段：

// Using the jQuery.data method.
$.data(el[0], 'data').first
$.data($('div')[0], 'data').first

// Using the more convenient contextual method .data
el.data('data').first
$('div').data('data').first

// Combining jQuery and vanilla js
$.data(document.getElementsByTagName('div')[0], 'data').first

但是，下面的语句如何获得正确的存储数据属性？

$.data(el, 'data').first

当您使用jQuery元素调用jQuery.data时，您将data属性添加到jQuery包装器元素，而不是包装的DOM元素。因此，检索此data字段的唯一方法是使用相同的对象：

$.data(el, 'data').first
el.data('data').first

但是，一旦el引用消失，您将无法再次恢复data属性。因为正如我之前所说的那样，你不是将这个data属性存储在DOM模型中，而是存储在局部变量中。

访问JQuery元素 - $ .data

3 个答案: