web-dev-qa-db-fra.com

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

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

i.e. Sélectionnez tous les éléments pour lesquels .data('myAttr') a déjà été défini.

[~ # ~] solution [~ # ~]

Un jsfiddle à démontrer est violon

javascriptjqueryjquery-selectors
88
Argiropoulos Stavros

Vous pourriez faire

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

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

vous pouvez aussi utiliser filter () 

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

Le moyen le plus simple et le plus simple de les sélectionner est:

$('[data-myAttr]')

Plus d'informations:

J'ai testé beaucoup de choses.

L'utilisation de $('[data-myAttr!=""]') ne fonctionne pas dans tous les cas. Parce que les éléments pour lesquels data-myAttr N'est pas défini, leur data-myAttr Sera égal à undefined et $('[data-myAttr!=""]') sélectionnera également ceux-ci, ce qui est incorrect.

62
Ashkan Mobayen Khiabani

Vous pouvez utiliser filter () :

var elements = $("*").filter(function() {
    return $(this).data("myAttr") !== undefined;
});
19
Frédéric Hamidi

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

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

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

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

Vérifiez this jsfiddle pour un exemple

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

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

Cela devrait fonctionner pour les deux éléments avec les attributs data- Et les éléments avec les données stockées en utilisant $.data() parce que

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

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

Cela provient 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 constater, ils utilisent $.data(elem, match) à la place de $(elem).data(match), ce qui empêche la mise à jour du cache si vous demandez des éléments avec les attributs data-. Si l'élément a été testé pour le stockage data(), cela fonctionne bien, mais sinon, il ne sera pas inclus dans les correspondances résultantes.

Cela peut ne pas être un bogue du tout si vous voulez faire correspondre uniquement des éléments avec des informations de données définies par vous, sinon, il vous reste deux options.

  1. N'utilisez pas jquery-ui et ne développez pas 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]);
   }
});

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

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

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

     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>
6
devconcept
$('[data-myAttr]').each(function() {
       var element = $(this);
       // Do something with the element
});
5
Khalid

Sélectionnez les éléments que j'ai précédemment définis avec 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/

2
guest271314