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

96

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

javascript jquery jquery-selectors

— Argiropoulos Stavros
source

98

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

— Nicola Peluchetti
source

67

Ou simplement:$('[data-myAttr]')

— andlrc

4

J'ai pensé la même chose. Cela ne fonctionne pas comme prévu. voir cette DEMO

— gdoron soutient Monica le

une fermeture 'est manquante dans le premier morceau de code (impossible de modifier la réponse directement)

— Florent2

1

$ ('[données-monAttr! = ""]'); renverra les éléments qui ne lui sont pas affectés. Le commentaire de @NULL ne récupère que les éléments qui l'ont défini.

— arleslie

6

FAUX! solution correcte: $ ('[data-myAttr]') - voir la réponse ci-dessous pour l'explication

— BassMHL

74

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.

— Ashkan Mobayen Khiabani
source

3

Cela ne fonctionne qu'avec les attributs de données définis dans le balisage. Il ne fonctionne PAS avec les attributs de données définis via jQuery, voir jsfiddle.net/2p7h0Lj8/1

— Sophivorus

19

Vous pouvez utiliser filter () :

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

— Frédéric Hamidi
source

1

Était sur le point de publier ceci, voici un violon pour montrer que cela fonctionne: jsfiddle.net/gbHFZ/1

— Rory McCrossan

1

Pourquoi le sélecteur d'attribut ne fait pas le travail? $('[data-myAttr]')?

— gdoron soutient Monica le

6

@gdoron, c'est parce que data()la forme getter de la lecture lit effectivement les data-attributs HTML5 , mais sa forme setter ne les crée ni ne les met à jour.

— Frédéric Hamidi le

ummm, alors où enregistre-t-il les données? pouvez-vous me donner une référence? J'ai lu ceci "(toutes les valeurs de données sont ensuite stockées en interne dans jQuery)". mais où???

— gdoron soutient Monica le

3

@gdoron, les données sont conservées dans un cache global, saisi par un identifiant associé à l'élément via une propriété expando.

— Frédéric Hamidi le

17

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

— roberkules
source

jQuery UI a déjà cela, donc certains peuvent ne pas avoir besoin d'appeler la fonction anonyme. api.jqueryui.com/data-selector

— arleslie

7

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.

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>

Développer l'extrait

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>

Développer l'extrait

— devconcept
source

Cela faisait partie de la solution à mon problème de sélection d'éléments avec des attributs data- * sans connaître l'identifiant réel ou le nom d'attribut data. J'ai trouvé le moyen d'étendre jQuery pour le faire, ailleurs, mais +1 ici pour que l'extrait de code montre une application pratique. D'autres donnent juste assez pour donner un indice, mais parfois vous devez MONTRER comment UTILISER les informations fournies. Merci! :)

— Brandon Elliott

7

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

— Khalid
source

2

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

Développer l'extrait

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

— invité271314
source

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

— Argiropoulos Stavros

@ArgiropoulosStavros Est-il nécessaire de renvoyer des éléments dont l' html data-*attribut est défini, ainsi que jQuery.data()défini?

— invité271314