Jquery sélectionne tous les éléments qui ont $ jquery.data ()

Sélectionnez les éléments avec lesquels j'ai précédemment défini jquery.data();

ie Sélectionnez tous les éléments .data('myAttr')déjà définis.

SOLUTION

Un jsfiddle à démostrer est Fiddle

Vous pourriez faire

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

ceci sélectionne tous les éléments qui ont un attribut data-myAttrqui n'est pas égal à '' (il doit donc avoir été défini);

vous pouvez également utiliser filter ()

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

La meilleure et simple façon de les sélectionner est:

$('[data-myAttr]')

Plus d'information:

J'ai testé beaucoup de choses.

L'utilisation $('[data-myAttr!=""]')ne fonctionne pas dans tous les cas. Parce que les éléments qui n'ont pas d' data-myAttrensemble auront leur data-myAttrégal à undefinedet $('[data-myAttr!=""]')les sélectionneront également, ce qui est incorrect.

Vous pouvez utiliser filter () :

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

Vous pouvez utiliser cette extension jQuery Selector: Interroger des données d'élément

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

Vous pouvez utiliser l'interface utilisateur JQuery avec le sélecteur: data ()

Sélectionne les éléments dont les données sont stockées sous la clé spécifiée.

Vérifiez ce jsfiddle pour un exemple

Pour obtenir tous les éléments correspondants, .data('myAttr')vous pouvez utiliser

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

Cela devrait fonctionner à la fois pour les éléments avec des data-attributs et pour les éléments avec des données stockées en utilisant $.data()car

À partir de jQuery 1.4.3, les attributs de données HTML 5 seront automatiquement ajoutés à l'objet de données de jQuery.

Mais cela ne fonctionne pas très bien. Vérifiez ce jsfiddle et vous verrez que la deuxième fois que le sélecteur est appelé, il doit correspondre à 2 éléments et ne correspond qu'à un seul. Cela est dû à "un bogue" dans la bibliothèque jquery-ui.

Ceci est tiré du fichier jquery-ui principal.

 $.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 ] );
        }
});

Comme vous pouvez le voir, ils utilisent à la $.data(elem, match)place, $(elem).data(match)ce qui empêche la mise à jour du cache au cas où vous demanderiez des éléments avec des data-attributs. Si l'élément a été testé pourdata() stockage, cela fonctionne bien mais sinon, il ne sera pas inclus dans les correspondances résultantes.

Ce n'est peut-être pas du tout un bogue si vous voulez faire correspondre uniquement des éléments avec des informations de données définies par vous, mais sinon, vous avez deux options.

1. N'utilisez pas jquery-ui et étendez votre propre pseudo-sélecteur $(: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]);
      }
   });

   Afficher l'extrait de code

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

   Exécuter l'extrait de codeMasquer les résultats

   Développer l'extrait

2. Utilisez jquery-ui avec le :datapseudosélecteur et joignez les résultats de la sélection [data-myAttr]pour inclure ceux qui pourraient être ignorés

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

   Afficher l'extrait de code

    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>
   
    

   Exécuter l'extrait de codeMasquer les résultats

   Développer l'extrait

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

Sélectionnez les éléments avec lesquels j'ai précédemment défini jquery.data();

La question est de trouver tous les éléments avec une clé spécifique et non des données.

Essayez d'utiliser 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>

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