Agregar atributo de datos a DOM


170
$('div').data('info', 1);

alert($('div').data('info'));
//this works    

$('div[data-info="1"]').text('222');
//but this don't work

Estoy creando un elemento dentro de jquery. Después de eso, quiero agregar el atributo "datos". Es como y se agrega, pero en el DOM, esto no es aparente, y no puedo obtener el elemento, usando

$('div[data-example="example"]').html()

jsfiddle

Respuestas:


423

Usa el .data()método:

$('div').data('info', '222');

Tenga en cuenta que esto no crea un data-infoatributo real . Si necesita crear el atributo, use .attr():

$('div').attr('data-info', '222');

66
@Luntegg: use a .data()menos que realmente tenga una razón para usar .attr().
Licuadora

9
.data()no trabajes Que no se suman los datos de atributos de DOM, y no consigo elemento de datos de atributos ..
Luntegg

2
También tiene que ser una cadena: $ ('div'). Attr ('data-info', '' + info.id)
daviestar

1
parece .data(key, val)que crearía el attr. Alguien sabe por qué no?
Luke W

16
Note that this doesn't create an actual data-info attribute. If you need to create the attribute, use .attr():Esta fue la clave de mi problema. Muchas gracias.
Mikayil Abdullayev

28

El .data () de jQuery hace un par de cosas pero no agrega los datos al DOM como un atributo. Cuando se usa para capturar un atributo de datos, lo primero que hace es crear un objeto de datos jQuery y establece el valor del objeto en el atributo de datos. Después de eso, se desacopla esencialmente del atributo de datos.

Ejemplo:

<div data-foo="bar"></div>

Si toma el valor del atributo utilizando .data('foo'), devolverá "barra" como era de esperar. Si luego cambia el atributo usando .attr('data-foo', 'blah')y luego usa .data('foo')para tomar el valor, devolverá "barra" aunque el DOM lo indique data-foo="blah". Si usa .data()para establecer el valor, cambiará el valor en el objeto jQuery pero no en el DOM.

Básicamente, .data()es para configurar o verificar el valor de datos del objeto jQuery. Si lo está comprobando y aún no tiene uno, crea el valor en función del atributo de datos que se encuentra en el DOM. .attr()es para establecer o verificar el valor de atributo del elemento DOM y no tocará el valor de datos jQuery. Si necesita que ambos cambien, debe usar ambos .data()y .attr(). De lo contrario, quédese con uno u otro.


14

en Jquery " datos " no se actualiza por defecto:

alert($('#outer').html());
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').data("myval","20"); //setter
alert($('#outer').html());

En su lugar, usaría " attr " para la actualización en vivo:

alert($('#outer').html());
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').attr("data-myval","20"); //setter
alert($('#outer').html());

4
 $(document.createElement("img")).attr({
                src: 'https://graph.facebook.com/'+friend.id+'/picture',
                title: friend.name ,
                'data-friend-id':friend.id,
                'data-friend-name':friend.name
            }).appendTo(divContainer);

3
Quizás podría explicar lo que está sucediendo en su código, para ayudar a otros.
Mohamad Shiralizadeh

3

El uso .data()solo agregará datos al objeto jQuery para ese elemento. Para agregar la información al elemento en sí, debe acceder a ese elemento utilizando jQuery's .attro native.setAttribute

$('div').attr('data-info', 1);
$('div')[0].setAttribute('data-info',1);

Para acceder a un elemento con el conjunto de atributos, simplemente puede seleccionar en función de ese atributo como lo anota en su publicación ( $('div[data-info="1"]')), pero cuando lo usa .data()no puede. Para seleccionar en función de la .data()configuración, deberá utilizar la función de filtro de jQuery.

jsFiddle Demo

$('div').data('info', 1);
//alert($('div').data('info'));//1

$('div').filter(function(){
   return $(this).data('info') == 1; 
}).text('222');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>


0

para obtener el texto de un

<option value="1" data-sigla="AC">Acre</option>

uf = $("#selectestado option:selected").attr('data-sigla');
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.