jquery - name - Agregar atributo de datos a DOM

jquery atributo id

Question

$(''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 atributos de "datos". Es como y se agrega, pero en el DOM, esto no es evidente, y no puedo obtener el elemento, usando

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

jsfiddle

Answer 1

El uso de .data() solo agregará datos al objeto jQuery para ese elemento. Para agregar la información al elemento en sí, necesita acceder a ese elemento usando .attr de jQuery o 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 nota en su publicación ( $(''div[data-info="1"]'') ), pero cuando usa .data() no puedes. Para seleccionar en función de la configuración .data() , necesitaría usar 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>

Answer 2

Usa el método .data() :

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

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

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

Answer 3

en Jquery " datos " no se actualiza de manera predeterminada:

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

En cambio, 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());

Answer 4

jQuery''s .data () hace un par de cosas pero no agrega los datos al DOM como un atributo. Al usarlo para tomar un atributo de datos, lo primero que hace es crear un objeto de datos jQuery y establece el valor del objeto para el atributo de datos. Después de eso, está esencialmente desacoplado del atributo de datos.

Ejemplo:

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

Si tomas el valor del atributo usando .data(''foo'') , devolverá la "barra" como es de esperar. Si luego cambias el atributo usando .attr(''data-foo'', ''blah'') y luego usas .data(''foo'') para tomar el valor, devolverá "bar" aunque el DOM dice 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 establecer o verificar el valor de datos del objeto jQuery. Si lo está comprobando y todavía no tiene uno, crea el valor basado en el atributo de datos que está en el DOM. .attr() es para establecer o verificar el valor de atributo del elemento DOM y no tocará el valor de datos de jQuery. Si necesita que ambos cambien, debe usar tanto .data() como .attr() . De lo contrario, quédese con uno o el otro.

Answer 5

para obtener el texto de un

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

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

Answer 6

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