Adicionando atributo de dados ao DOM

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

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

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

Estou criando elemento dentro de jquery. Depois disso, quero adicionar o atributo "dados". Ele é como e é adicionado, mas no DOM, isso não é aparente e não consigo pegar o item usando

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

jsfiddle

Use o .data()método:

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

Observe que isso não cria um data-infoatributo real . Se você precisar criar o atributo, use .attr():

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

.data () do jQuery faz algumas coisas, mas não adiciona os dados ao DOM como um atributo. Ao usá-lo para obter um atributo de dados, a primeira coisa que faz é criar um objeto de dados jQuery e define o valor do objeto para o atributo de dados. Depois disso, é essencialmente dissociado do atributo data.

Exemplo:

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

Se você pegasse o valor do atributo usando .data('foo'), ele retornaria "bar" conforme o esperado. Se você alterar o atributo usando .attr('data-foo', 'blah')e depois usar .data('foo')para capturar o valor, ele retornará "bar" mesmo que o DOM indique data-foo="blah". Se você .data()definir o valor, ele mudará o valor no objeto jQuery, mas não no DOM.

Basicamente, .data()é para definir ou verificar o valor dos dados do objeto jQuery. Se você estiver verificando e ele ainda não tiver um, ele cria o valor com base no atributo de dados que está no DOM. .attr()serve para definir ou verificar o valor do atributo do elemento DOM e não tocará no valor dos dados do jQuery. Se você precisar que ambos mudem, use ambos .data()e .attr(). Caso contrário, fique com um ou outro.

No Jquery, " dados " não são atualizados por padrão:

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

Você usaria " attr " para atualização ao 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);

O uso .data()adicionará apenas dados ao objeto jQuery para esse elemento. Para adicionar as informações ao próprio elemento, você precisa acessar esse elemento usando jQuery's .attrou native.setAttribute

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

Para acessar um elemento com o conjunto de atributos, você pode simplesmente selecionar com base nesse atributo conforme observa em sua postagem ( $('div[data-info="1"]')), mas quando você usa, .data()não pode. Para selecionar com base na .data()configuração, você precisaria usar a função de filtro do 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 obter o texto de um

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

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