Parse $ .extend configuración del atributo de datos

Question

Sé que puedo usar $ .data pero ¿cómo puedo iterar a través de todos los atributos data- y combinar los valores con la configuración de complemento predeterminada?

(function($){ 

    $.fn.plugin = function(opts){ 

    opts = $.extend({ 
     foo: 'abc', 
     boo: 45 
    }, opts); 

    return this.each(function(){   
      ... 
    }); 

    }; 
})(jQuery); 

Así que si uso

$('.el').plugin();

se debe buscar datos de atributos en .el, al igual que los datos-foo etc ...

Answer 1

El método .data() soporta atributos Data-.

A partir de jQuery 1.4.3 HTML 5 Data- atributos será automáticamente detuvimos en objeto de datos de jQuery. El tratamiento de los atributos con guiones incrustados se cambió en jQuery 1.6 para cumplir con la especificación W3C HTML5 .

Llamada sin speciying un parámetro devolverá un objeto con pares clave/valor para todos los datos de atributos:

var mydata = $("#mydiv").data(); 

Answer 2

Puede utilizar data() método en el objeto jQuery, que dará todos los atributos de datos como par clave/valor. Prueba esto.

(function($){ 

    $.fn.plugin = function(opts){ 

    //this.data() will give { foo: 'abc', boo: 45 ... } 
    opts = $.extend(this.data(), opts); 

    return this.each(function(){   
      ... 
    }); 

    }; 
})(jQuery); 

.data() referencia: http://api.jquery.com/data/

Answer 3

Usted puede obtener todos los atributos de un elemento como este:

//get the element and setup an array for output 
var el = document.getElementById("o"), 
    arr = []; 

//loop through each attribute for the element 
for (var i = 0, attrs = el.attributes, l=attrs.length; i < l; i++){ 

    //if the current attribute starts with `data-` then add it to the array 
    if (attrs.item(i).nodeName.substr(0, 5) == 'data-') { 
     arr.push(attrs.item(i).nodeName); 
    } 
} 

Aquí es una demostración: http://jsfiddle.net/ksbD3/1/

También me dio la mayor parte del código anterior de esta respuesta: Get all Attributes from a HTML element with Javascript/jQuery

Answer 4

En su bucle each(), puede combinar el objeto devuelto por data() con sus valores por defecto, y luego fusionar el argumento opts con el resultado en una sola llamada a $.extend():

$.fn.plugin = function(opts) { 
    return this.each(function() {   
     var thisOpts = $.extend({ 
      foo: "abc", 
      boo: 45 
     }, $(this).data(), opts); 
     // Now use 'thisOpts' as operating parameters for this element... 
    }); 
}; 

Esto debería lograr lo que quiere: la opts el argumento tiene la prioridad más alta, seguido de los atributos data- del elemento actual, seguidos por los valores predeterminados del complemento.

Answer 5

Gracias por todas las respuestas que señalan usando opts = $ .extend (this.data(), opts);

Se debe agregar un hecho importante aquí: es la transformación del atributo de datos HTML.

N AME datos-cool se puede acceder como este this.data (fresco n AME)

datos-otro- c ool- n AME se puede acceder como esto esto.datos (otro C oolN AME)

Detalles: Does jQuery internally convert HTML5 data attribute keys to lowercase?

Caso sensible de Java y la transformación del nombre del atributo podría ser una trampa si no se conoce.