Jquery selecciona todos los elementos que tienen $ jquery.data ()

96

Seleccionar elementos que he configurado previamente con jquery.data();

es decir, seleccione todos los elementos que .data('myAttr')ya se han configurado.

SOLUCIÓN

Un jsfiddle para demostrar es Fiddle

javascript jquery jquery-selectors

— Argiropoulos Stavros
fuente

98

Podrías hacerlo

$('[data-myAttr!=""]');

esto selecciona todos los elementos que tienen un atributo data-myAttrque no es igual a '' (por lo que debe haber sido establecido);

también puedes usar filter ()

$('*').filter(function() {
    return $(this).data('myAttr') !== undefined;
});

— Nicola Peluchetti
fuente

67

O simplemente:$('[data-myAttr]')

— andlrc

4

Pensaba lo mismo. No funciona como se esperaba. ver esta DEMO

— gdoron está apoyando a Monica

falta un cierre en la primera parte del código (no se puede editar la respuesta directamente)

— Florent2

1

$ ('[data-myAttr! = ""]'); devolverá elementos que no lo tengan asignado. El comentario de @NULL solo obtiene los elementos que lo tienen configurado.

— arleslie

6

¡INCORRECTO! solución correcta: $ ('[data-myAttr]') - vea la respuesta a continuación para obtener una explicación

— BassMHL

74

La mejor y más sencilla forma de seleccionarlos es:

$('[data-myAttr]')

Más información:

Probé muchas cosas.

El uso $('[data-myAttr!=""]')no funciona en todos los casos. Porque los elementos que no tienen un data-myAttrconjunto tendrán su data-myAttrigual undefinedy $('[data-myAttr!=""]')los seleccionarán también, lo cual es incorrecto.

— Ashkan Mobayen Khiabani
fuente

3

Esto solo funciona con atributos de datos definidos en el marcado. NO funciona con atributos de datos definidos a través de jQuery, consulte jsfiddle.net/2p7h0Lj8/1

— Sophivorus

19

Puede usar filter () :

var elements = $("*").filter(function() {
    return $(this).data("myAttr") !== undefined;
});

— Frédéric Hamidi
fuente

1

Estaba a punto de publicar esto, aquí hay un violín para mostrar que funciona: jsfiddle.net/gbHFZ/1

— Rory McCrossan

1

¿Por qué el selector de atributos no funciona? $('[data-myAttr]')?

— gdoron apoya a Monica

6

@gdoron, eso se debe a que el data()formulario getter de hecho lee los data-atributos HTML5 , pero su formulario setter no los crea ni los actualiza.

— Frédéric Hamidi

ummm, entonces, ¿dónde guarda los datos? ¿Puedes darme una referencia? Leí esto "(todos los valores de datos se almacenan internamente en jQuery)". ¿¿¿pero donde???

— gdoron apoya a Monica

3

@gdoron, los datos se conservan en un caché global, codificado por una identificación que está asociada con el elemento a través de una propiedad expando.

— Frédéric Hamidi

17

Puede usar esta extensión de jQuery Selector: Consultando datos de elementos

$(':data');       // All elements with data  
$(':not(:data)'); // All elements without data

— roberkules
fuente

jQuery UI ya tiene esto, por lo que es posible que algunos no necesiten llamar a la función anónima. api.jqueryui.com/data-selector

— arleslie

7

Puede usar la interfaz de usuario de JQuery con el selector: data ()

Selecciona elementos que tienen datos almacenados bajo la clave especificada.

Mira este jsfiddle para ver un ejemplo

Para que todos los elementos coincidan .data('myAttr'), puede usar

var matches = $(':data(myAttr)');

Esto debería funcionar tanto para elementos con data-atributos como para elementos con datos almacenados usando $.data()porque

A partir de jQuery 1.4.3 HTML 5, los atributos de datos se incorporarán automáticamente al objeto de datos de jQuery.

Pero esto no funciona muy bien. Mira este jsfiddle y verá que la segunda vez que se llama al selector, debe coincidir con 2 elementos y solo coincide con uno. Esto se debe a "un error" en la biblioteca jquery-ui.

Esto se toma del archivo principal jquery-ui.

 $.extend( $.expr[ ":" ], {
    data: $.expr.createPseudo ?
        $.expr.createPseudo(function( dataName ) {
            return function( elem ) {
                return !!$.data( elem, dataName );
            };
        }) :
        // support: jQuery <1.8
        function( elem, i, match ) {
            return !!$.data( elem, match[ 3 ] );
        }
});

Como puede ver, están usando en su $.data(elem, match)lugar, lo $(elem).data(match)que hace que la caché no se actualice en caso de que esté solicitando elementos con data-atributos. Si el elemento ha sido probado paradata() almacenamiento, esto funciona bien, pero si no, no se incluirá en las coincidencias resultantes.

Esto podría no ser un error en absoluto si lo que desea es hacer coincidir solo los elementos con la información de datos establecida por usted, pero si no, le quedan dos opciones.

No use jquery-ui y extienda su propio pseudo-selector $(:mydata(myAttr))

$.extend($.expr[":"], {
   mydata: $.expr.createPseudo ?
   $.expr.createPseudo(function(dataName) {
      return function(elem) {
         return !!$(elem).data(dataName);
      };
   }) : function(elem, i, match) {
       return !!$(elem).data(match[3]);
   }
});

Mostrar fragmento de código

 // pseudoselector code
 $.extend($.expr[":"], {
   mydata: $.expr.createPseudo ?
     $.expr.createPseudo(function(dataName) {
       return function(elem) {
         return !!$(elem).data(dataName);
       };
     }) : function(elem, i, match) {
       return !!$(elem).data(match[3]);
     }
 });
 // end pseudoselector

 testSelector = function() {
   var matched = $(':mydata(test)'),
     results = $('#results');
   results.append('<div>You matched ' + matched.length + ' elements</div>');
   matched.css('border', 'black 3px solid');
   console.log(matched);
   console.log('You matched ' + matched.length + ' elements');
 };

 testSelector();
 $('#addData').click(function() {
   $(".bar").data('test', 'value2');
   testSelector();
 });

 .foo {
   background-color: red;
   color: white;
 }
 .bar {
   background-color: blue;
   color: white;
 }
 #addData {
   margin-top: 20px;
 }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div>
   <span class="bar">without data attribute</span>
   <span class="foo" data-test="value1">with data attribute</span>
 </div>
 <button id="addData" type="button">Add data</button>
 <div id="results"></div>

Expandir fragmento

Use jquery-ui con el :datapseudoselector y una los resultados de la selección [data-myAttr]para incluir los que podrían omitirse

var matches = $(':data(myAttr)', '[data-myAttr]')

Mostrar fragmento de código

 testSelector = function() {
   var matched = $(':data(test), [data-test]'),
       results = $('#results');
   results.append('<div>You matched ' + matched.length + ' elements</div>');
   matched.css('border', 'black 3px solid');
   console.log(matched);
   console.log('You matched ' + matched.length + ' elements');
 };

 testSelector();
 $('#addData').click(function() {
   $(".bar").data('test', 'value2');
   testSelector();
 });

 .foo {
   background-color: red;
   color: white;
 }
 .bar {
   background-color: blue;
   color: white;
 }
 #addData {
   margin-top: 20px;
 }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 <div>
   <span class="bar">without data attribute</span>
   <span class="foo" data-test="value1">with data attribute</span>
 </div>
 <button id="addData" type="button">Add data</button>
 <div id="results"></div>

Expandir fragmento

— devconcept
fuente

Esto fue parte de la solución a mi problema de seleccionar elementos con atributos de datos * sin conocer la identificación real o el nombre del atributo de datos. Encontré la manera de extender jQuery para hacer esto, en otro lugar, pero +1 aquí para que el fragmento de código muestre una aplicación práctica. Otros dan solo lo suficiente para dar pistas, pero a veces es necesario MOSTRAR cómo USAR la información proporcionada. ¡Gracias! :)

— Brandon Elliott

7

$('[data-myAttr]').each(function() {
       var element = $(this);
       // Do something with the element
});

— Jalid
fuente

2

~~Seleccionar elementos que he configurado previamente con jquery.data();~~

La pregunta es encontrar todos los elementos con una clave específica y no ningún dato.

Intenta utilizar jQuery.data()

$(".myClass").each(function(i){
    if( i % 2 == 0 ){
        $(this).data("myAttr",i + 1);                
    }
});
    
var res = $(".myClass").map(function(i) {
    console.log($(this).data("myAttr"));
    return $.data(this, "myAttr") !== undefined ? this : null
});    

console.log(res);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="myClass">1</div>
<div class="myClass">2</div>
<div class="myClass">3</div>
<div class="myClass">4</div>
<div class="myClass">5</div>

Expandir fragmento

jsfiddle http://jsfiddle.net/xynZA/142/

— invitado271314
fuente

Gracias por la respuesta La pregunta es para encontrar todos los elementos con una clave específica y no ningún dato.

— Argiropoulos Stavros

@ArgiropoulosStavros ¿Es un requisito devolver elementos que tienen un html data-*conjunto de atributos, así como un jQuery.data()conjunto?

— guest271314