Agregar atributo de datos a DOM

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

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');

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.

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());

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

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>

para obtener el texto de un

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

uf = $("#selectestado option:selected").attr('data-sigla');