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

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.

— Shpigford
source

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

183

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

— OGM
source

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

Appuyé @ Valamas-AUS

— Adam Waite

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

— gmo

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

— Matthieu Charbonnier

1

Merci de garder la réponse à jour

— Anthony C

19

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

— Siva Charan
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

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
source

1

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

— AlexioVay

5

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().

— David dit de réintégrer Monica
source

4

Selon la documentation, cela devrait le faire

:not([attr="value"])

DEMO

J'espère que cela t'aides

— Dhiraj
source

3

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

JSBIN

— Shanimal
source

2

$('[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

— adeneo
source

1

Cela fonctionne pour moi

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

— Mardok
source

Ce sont cependant deux itérations.

— Jens

0

Essaye ça :

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

— Pascal Boutin
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

0

Cela fonctionne pour moi:

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

— V. Kovpak
source