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

es decir, Selecciona todos los elementos con .data('myAttr') ya se han establecido.

SOLUCIÓN

Un jsfiddle a demostrar es El violín

7 Comentarios

  1. 92

    Usted podría hacer

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

    esto selecciona todos los elementos que tienen un atributo data-myAttr que no es igual a » (por lo que debe haber sido establecida);

    usted podría también utilizar filter()

    $('*').filter(function() {
        return $(this).data('myAttr') !== undefined;
    });
    • O simplemente: $('[data-myAttr]')
    • Pensaba lo mismo. No funciona como se esperaba. consulte este DEMO
    • un cierre de ‘ falta en el primer trozo de código (no se puede editar la respuesta directamente)
    • $(‘[datos myAttr!=»»]’); volverá elementos que no tienen asignado. @NULL ‘s comentario sólo obtiene los elementos que tienen establecido.
    • MAL! solución correcta : $(‘[datos myAttr]’) — véase la respuesta de abajo para la explicación
    • esto también funciona: $(":data('myAttr')")

  2. 64

    La mejor manera sencilla y seleccione ellos es:

    $('[data-myAttr]')

    Más Información:

    He probado un montón de cosas.

    Utilizando $('[data-myAttr!=""]') no funciona para todos los casos. Debido a que los elementos que no tienen una data-myAttr conjunto, tendrán su data-myAttr igual a undefined y $('[data-myAttr!=""]') seleccionará aquellos así, lo cual es incorrecto.

    • Esto sólo funciona con los datos de los atributos definidos en el marcado. NO funciona con los datos de los atributos definidos a través de jQuery, consulte jsfiddle.net/2p7h0Lj8/1
  3. 19

    Puede utilizar filter():

    var elements = $("*").filter(function() {
        return $(this).data("myAttr") !== undefined;
    });
    • Estaba a punto de este post, aquí un violín para mostrar funciona: jsfiddle.net/gbHFZ/1
    • Por qué selector de atributo no hace el trabajo? $('[data-myAttr]') ?
    • eso es porque data()‘s getter formulario de hecho leer el HTML5 data- atributos, pero su setter forma ni se crea ni se actualiza.
    • ummm, así que ¿de dónde guardar los datos? puede usted dar a mi una referencia? He leído este «(todos los valores de datos que se almacenan internamente en jQuery).» pero donde???
    • He estado pensando acerca de la «undefined» check.. he leído que la forma correcta sería ‘typeof n !== «no definido»‘. Es que comprobar lo que se está utilizando en realidad el mismo, pero más corta?
    • los datos se almacenan en la caché global, cerrado por un id que se asocia con el elemento a través de una propiedad expando.
    • Entonces, ¿cómo puedo acceder a los datos sin .data()?
    • el typeof x !== "undefined" patrón es útil para comprobar no declaradas las variables (ver stackoverflow.com/questions/2703102/typeof-undefined-vs-null). Esto es un exceso de aquí, ya no estamos trabajando con una variable que podría ser declarados.
    • no se puede hacer eso sin reproducir la parte de jQuery interna de los detalles de implementación. Pero, ¿por qué quieren acceder a la información registrada por el setter forma de data() sin usar su getter forma?
    • Esto debería haber sido aceptado solución.

  4. 16

    Usted podría utilizar este Selector de jQuery extensión: Consulta de datos del elemento

    $(':data');       //All elements with data  
    $(':not(:data)'); //All elements without data
    • Se puede agregar un ejemplo de trabajo a mi jsfiddle en mi respuesta?
    • $(‘:datos(myAttr)’); a mí me funciona
    • jQuery UI tiene esta ya para algunos no es necesario llamar a la función anónima. api.jqueryui.com/data-selector
  5. 6

    Puede utilizar JQuery UI con el :los datos() selector

    Selecciona los elementos que tienen los datos almacenados bajo la clave especificada.

    De verificación este jsfiddle para un ejemplo

    Para obtener todos los elementos coincidentes .data('myAttr') puede utilizar

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

    Esto debería funcionar para ambos elementos con data- atributos y elementos con los datos almacenados con el $.data() porque

    Como de jQuery 1.4.3 HTML 5 datos de los atributos se extraen automáticamente en jQuery datos del objeto.

    Pero este no funciona muy bien. Compruebe este jsfiddle y verás que la segunda vez que el selector se llama debe coincidir con 2 elementos y es sólo una coincidencia. Esto es debido a un «bug» en el jquery-biblioteca de interfaz de usuario.

    Esto se realiza desde el core de jquery-ui archivo.

     $.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 se puede ver que se están utilizando $.data(elem, match) lugar $(elem).data(match) que hace que la caché no se actualice en caso de que usted está solicitando elementos con data- atributos. Si el elemento ha sido probado por data() de almacenamiento de esto funciona bien, pero si no no se incluirá en el resultado de los partidos.

    Esto podría no ser un error si lo que quieres es para que coincida con sólo los elementos con la información de los datos especificados por el usuario, pero si no te deja con dos opciones.

    1. No uso jquery-ui y ampliar su propia pseudo-selector de $(: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]);
         }
      });

      JS:

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

      CSS:

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

      HTML:

       <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>
      
       

    2. El uso de jquery-ui con el :data pseudoselector y unirse a los resultados de la selección de [data-myAttr] incluir las que podrían ser omitidos

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

      JS:

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

      CSS:

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

      HTML:

       <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>
      
       

    • Esto fue parte de la solución a mi problema de la selección de elementos de datos* atributos sin conocer la identificación real de datos o el nombre del atributo. He encontrado la manera de extender jQuery para hacer esto, en otro lugar, pero +1 por el fragmento de código para mostrar la aplicación práctica. Otros dan suficiente a la pista, pero a veces es necesario MOSTRAR cómo UTILIZAR la información proporcionada. Gracias! 🙂
  6. 5
    $('[data-myAttr]').each(function() {
           var element = $(this);
           //Do something with the element
    });
  7. 2

    Seleccione los elementos que he establecido previamente con jquery.data();


    La pregunta es para encontrar todos los elementos con una clave específica y no
    cualquier dato.


    Trate de la utilización de jQuery.de datos()

    JS:

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

    HTML:

    <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>

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

    • Gracias por la respuesta.La pregunta es para encontrar todos los elementos con una clave específica y no los datos.
    • Es requisito para devolver los elementos que han html data-* conjunto de atributos , así como jQuery.data() conjunto ?

Dejar respuesta

Please enter your comment!
Please enter your name here