jQuery: sélectionnez les attributs de données qui ne sont pas vides?

Question 1

J'essaye de sélectionner tous les éléments qui ont un data-go-toattribut qui n'est pas vide.

J'ai essayé $('[data-go-to!=""]')mais curieusement, il semble sélectionner chaque élément de la page si je fais cela.

Question 2

essayer

$(':not([data-go-to=""])')

METTRE À JOUR:

Pour ne pas induire personne en erreur, cette réponse fonctionnera dans les anciennes versions de jQuery mais n'est pas à l'épreuve du temps. Étant donné que les réponses de @gmo et @ siva semblent fonctionner avec les versions ultérieures, je m'en remets à leurs réponses (et je vous encourage à voter pour) ... et j'espère bien sûr que vous passerez une journée fantastique.

Question 3

Juste comme référence supplémentaire, et une mise à jour ^{(mai'14) (août'15) (sep'16) (avr'17) (mar'18) (mar'19) ( mai'20 )} ...
Réponse qui fonctionne avec:

Chaînes vides:

Si le doit exister et pourrait avoir une valeur ^{(ou aucune} valeur ^{du tout)}attr

    jQuery("[href]");

Attributs manquants:

Si pourrait exister et s'il existe, doit avoir une certaine valeur attr

    jQuery("[href!='']");

Ou les deux:

Si doit exister et doit avoir une certaine valeur ... attr

    jQuery("[href!=''][href]");

^{PS : plus de combinaisons sont possibles ...}

Vérifiez ce test dans jsFiddle pour des exemples:

jQuery v1.11.0 -> jsFiddle online test
jQuery v2.1.0 -> jsFiddle online test
jQuery v2.1.3 -> jsFiddle online test
jQuery v3.0.0-alpha1 -> jsFiddle online test
jQuery v3.1.1 Slim -> jsFiddle online test
jQuery v3.2.1 -> jsFiddle online test
jQuery v3.3.1 -> jsFiddle online test
jQuery v3.4.1 -> jsFiddle online test ^{Dernière version de jQuery disponible dans jsFiddle le 28 mai 2020}
jQuery Edge -> jsFiddle online test ^{Version jQuery edge (à utiliser avec prudence)}

Ou ici dans SO avec cet extrait de code .

^{* L'extrait de code exécute jQuery v2.1.1}

Afficher l'extrait de code

jQuery('div.test_1 > a[href]').addClass('match');
jQuery('div.test_2 > a[href!=""]').addClass('match');
jQuery('div.test_3 > a[href!=""][href]').addClass('match');

div,a {
    display: block;
    color: #333;
    margin: 5px;
    padding: 5px;
    border: 1px solid #333;
}
h4 {
    margin: 0;
}
a {
    width: 200px;
    background: #ccc;
    border-radius: 2px;
    text-decoration: none;
}
a.match {
    background-color: #16BB2A;
    position: relative;
}
a.match:after {
    content: 'Match!';
    position: absolute;
    left: 105%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test_1">
    <h4>Test 1: jQuery('a[href]')</h4>
    <a href="test">href: test</a>
    <a href="#">href: #</a>
    <a href="">href: empty</a>
    <a>href: not present</a>
</div>
<div class="test_2">
    <h4>Test 2: jQuery('a[href!=""]')</h4>
    <a href="test">href: test</a>
    <a href="#">href: #</a>
    <a href="">href: empty</a>
    <a>href: not present</a>
</div>
<div class="test_3">
    <h4>Test 3: jQuery('a[href!=""][href]')</h4>
    <a href="test">href: test</a>
    <a href="#">href: #</a>
    <a href="">href: empty</a>
    <a>href: not present</a>
</div>

Développer l'extrait

Question 4

$('[data-go-to!=""]:[data-go-to]').each(function() {
    // Do Your Stuff
});

Question 5

A 'data-attributename' et sa valeur n'est pas vide:

$('[data-attributename]:not([data-attributename=""])')

A "data-attributename" vide ou non:

$('[data-attributename]')

Exemple de JS Fiddle

Question 6

Je ne suis pas sûr d'un sélecteur simple, mais vous pouvez utiliser filter():

$('[data-go-to]').filter(
    function(){
        return ($(this).attr('data-go-to').length > 0);
    });

Démo de JS Fiddle .

Références:

filter().

Question 7

Selon la documentation, cela devrait le faire

:not([attr="value"])

DEMO

J'espère que cela t'aides

Question 8

$('[data-go-to]:not([data-go-to=""])')

JSBIN

Question 9

$('[data-go-to]').filter(function() {
    return $(this).data('go-to')!="";
});

L' utilisation :not, .not(), :emptyetc ne vérifie si l'élément lui - même est vide, pas l'attribut de données. Pour cela, vous devrez filtrer en fonction de la valeur des attributs de données.

VIOLON

Question 10

Cela fonctionne pour moi

$('[attributename]').filter('[attributename!=""]')

Question 11

Essaye ça :

$('[data-go-to:not(:empty)]')

Question 12

Cela fonctionne pour moi:

$('.data .title td[data-field!=""]')

Answer 1

95

J'essaye de sélectionner tous les éléments qui ont un data-go-toattribut qui n'est pas vide.

J'ai essayé $('[data-go-to!=""]')mais curieusement, il semble sélectionner chaque élément de la page si je fais cela.

javascript jquery jquery-selectors custom-data-attribute Shpigford
la source

Answer 2

76

essayer

$(':not([data-go-to=""])')

METTRE À JOUR:

Pour ne pas induire personne en erreur, cette réponse fonctionnera dans les anciennes versions de jQuery mais n'est pas à l'épreuve du temps. Étant donné que les réponses de @gmo et @ siva semblent fonctionner avec les versions ultérieures, je m'en remets à leurs réponses (et je vous encourage à voter pour) ... et j'espère bien sûr que vous passerez une journée fantastique.

Benjamin Oman
la source

merci, cela a très bien fonctionné! Je voulais sélectionner uniquement des éléments d'image, j'ai donc ajouté $ (': not (img [data-go-to == ""]')

msanjay

2

Cela ne sélectionne-t-il pas tous les éléments qui n'ont pas d'attribut «data-to-go» vide? Quand le demandeur veut que tous les éléments avec cet attribut ne soient pas vides? (comme la réponse de Siva Charan se résout)

rodnaph

pas vraiment besoin de guillemets doubles non plus ... comme dans $('element:not([attribute=])'); // gets all of <element attribute="">ou$(':not([attribute=])'); // gets all of <* attribute="">

Anthony Hatzopoulos

2

Cela obtient tous les éléments pour moi, y compris celui qui a l'attribut de données que je recherche

Devil's Advocate

Cela ne semble pas fonctionner dans Safari mais le $('[data-go-to!=""]:[data-go-to]')fait.

Dan

Answer 3

merci, cela a très bien fonctionné! Je voulais sélectionner uniquement des éléments d'image, j'ai donc ajouté $ (': not (img [data-go-to == ""]')

msanjay

Answer 4

2

Cela ne sélectionne-t-il pas tous les éléments qui n'ont pas d'attribut «data-to-go» vide? Quand le demandeur veut que tous les éléments avec cet attribut ne soient pas vides? (comme la réponse de Siva Charan se résout)

rodnaph

Answer 5

pas vraiment besoin de guillemets doubles non plus ... comme dans $('element:not([attribute=])'); // gets all of <element attribute="">ou$(':not([attribute=])'); // gets all of <* attribute="">

Anthony Hatzopoulos

Answer 6

2

Cela obtient tous les éléments pour moi, y compris celui qui a l'attribut de données que je recherche

Devil's Advocate

Answer 7

Cela ne semble pas fonctionner dans Safari mais le $('[data-go-to!=""]:[data-go-to]')fait.

Dan

Answer 8

Juste comme référence supplémentaire, et une mise à jour ^{(mai'14) (août'15) (sep'16) (avr'17) (mar'18) (mar'19) ( mai'20 )} ...
Réponse qui fonctionne avec:

Chaînes vides:

Si le doit exister et pourrait avoir une valeur ^{(ou aucune} valeur ^{du tout)}attr

    jQuery("[href]");

Attributs manquants:

Si pourrait exister et s'il existe, doit avoir une certaine valeur attr

    jQuery("[href!='']");

Ou les deux:

Si doit exister et doit avoir une certaine valeur ... attr

    jQuery("[href!=''][href]");

^{PS : plus de combinaisons sont possibles ...}

Vérifiez ce test dans jsFiddle pour des exemples:

jQuery v1.11.0 -> jsFiddle online test
jQuery v2.1.0 -> jsFiddle online test
jQuery v2.1.3 -> jsFiddle online test
jQuery v3.0.0-alpha1 -> jsFiddle online test
jQuery v3.1.1 Slim -> jsFiddle online test
jQuery v3.2.1 -> jsFiddle online test
jQuery v3.3.1 -> jsFiddle online test
jQuery v3.4.1 -> jsFiddle online test ^{Dernière version de jQuery disponible dans jsFiddle le 28 mai 2020}
jQuery Edge -> jsFiddle online test ^{Version jQuery edge (à utiliser avec prudence)}

Ou ici dans SO avec cet extrait de code .

^{* L'extrait de code exécute jQuery v2.1.1}

Afficher l'extrait de code

jQuery('div.test_1 > a[href]').addClass('match');
jQuery('div.test_2 > a[href!=""]').addClass('match');
jQuery('div.test_3 > a[href!=""][href]').addClass('match');

div,a {
    display: block;
    color: #333;
    margin: 5px;
    padding: 5px;
    border: 1px solid #333;
}
h4 {
    margin: 0;
}
a {
    width: 200px;
    background: #ccc;
    border-radius: 2px;
    text-decoration: none;
}
a.match {
    background-color: #16BB2A;
    position: relative;
}
a.match:after {
    content: 'Match!';
    position: absolute;
    left: 105%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test_1">
    <h4>Test 1: jQuery('a[href]')</h4>
    <a href="test">href: test</a>
    <a href="#">href: #</a>
    <a href="">href: empty</a>
    <a>href: not present</a>
</div>
<div class="test_2">
    <h4>Test 2: jQuery('a[href!=""]')</h4>
    <a href="test">href: test</a>
    <a href="#">href: #</a>
    <a href="">href: empty</a>
    <a>href: not present</a>
</div>
<div class="test_3">
    <h4>Test 3: jQuery('a[href!=""][href]')</h4>
    <a href="test">href: test</a>
    <a href="#">href: #</a>
    <a href="">href: empty</a>
    <a>href: not present</a>
</div>

Développer l'extrait

Answer 9

6

Ça y est. Donnez votre avis sur cet utilisateur ici. les autres réponses plus anciennes ne fonctionnent pas pour moi. J'ai utilisé le troisième exemple.

Valamas

Answer 10

Appuyé @ Valamas-AUS

Adam Waite

Answer 11

Edit: Ajout d'un extrait de code SO, afin que vous puissiez le tester ici.

gmo

Answer 12

C'est celui qui fonctionne. $(':not([data-go-to=""])')ne fonctionne plus

Matthieu Charbonnier

Answer 13

1

Merci de garder la réponse à jour

Anthony C

Answer 14

19

$('[data-go-to!=""]:[data-go-to]').each(function() {
    // Do Your Stuff
});

Siva Charan
la source

6

Celui-ci fonctionne pour les chaînes vides et les attributs manquants, parfait

adamJLev

4

à partir de mai'14 ne fonctionne pas, donne une Unrecognized Expressionerreur.

coding_idiot

Answer 15

6

Celui-ci fonctionne pour les chaînes vides et les attributs manquants, parfait

adamJLev

Answer 16

4

à partir de mai'14 ne fonctionne pas, donne une Unrecognized Expressionerreur.

coding_idiot

Answer 17

7

A 'data-attributename' et sa valeur n'est pas vide:

$('[data-attributename]:not([data-attributename=""])')

A "data-attributename" vide ou non:

$('[data-attributename]')

Exemple de JS Fiddle

Jelgab
la source

1

C'est la seule réponse qui fonctionne encore pour moi en juin 2015.

AlexioVay

Answer 18

1

C'est la seule réponse qui fonctionne encore pour moi en juin 2015.

AlexioVay

Answer 19

Je ne suis pas sûr d'un sélecteur simple, mais vous pouvez utiliser filter():

$('[data-go-to]').filter(
    function(){
        return ($(this).attr('data-go-to').length > 0);
    });

Démo de JS Fiddle .

Références:

filter().

Answer 20

4

Selon la documentation, cela devrait le faire

:not([attr="value"])

DEMO

J'espère que cela t'aides

Dhiraj
la source

Answer 21

3

$('[data-go-to]:not([data-go-to=""])')

JSBIN

Shanimal
la source

Answer 22

$('[data-go-to]').filter(function() {
    return $(this).data('go-to')!="";
});

L' utilisation :not, .not(), :emptyetc ne vérifie si l'élément lui - même est vide, pas l'attribut de données. Pour cela, vous devrez filtrer en fonction de la valeur des attributs de données.

VIOLON

Answer 23

1

Cela fonctionne pour moi

$('[attributename]').filter('[attributename!=""]')

Mardok
la source

Ce sont cependant deux itérations.

Jens

Answer 24

Ce sont cependant deux itérations.

Jens

Answer 25

0

Essaye ça :

$('[data-go-to:not(:empty)]')

Pascal Boutin
la source

1

Ne pas aller. "Syntax error, unrecognized expression: [data-go-to:not(:empty)]"

Shpigford

api.jquery.com/empty-selector api.jquery.com/not-selector Selon cela, serait supposé fonctionner, triste, cela aurait été une solution propre!

Pascal Boutin

Answer 26

1

Ne pas aller. "Syntax error, unrecognized expression: [data-go-to:not(:empty)]"

Shpigford

Answer 27

api.jquery.com/empty-selector api.jquery.com/not-selector Selon cela, serait supposé fonctionner, triste, cela aurait été une solution propre!

Pascal Boutin

Answer 28

0

Cela fonctionne pour moi:

$('.data .title td[data-field!=""]')

V. Kovpak
la source

jQuery: sélectionnez les attributs de données qui ne sont pas vides?

Réponses:

Chaînes vides:

Attributs manquants:

Ou les deux:

Vérifiez ce test dans jsFiddle pour des exemples:

Ou ici dans SO avec cet extrait de code .