web-dev-qa-db-fra.com

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

J'essaie de sélectionner tous les éléments qui ont un attribut data-go-to Qui n'est pas vide.

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

javascriptjqueryjquery-selectorscustom-data-attribute
86
Shpigford

essayer

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

MISE À JOUR:

Afin de ne pas égarer qui que ce soit, cette réponse fonctionnera dans les anciennes versions de jQuery mais n’est pas à l’avenir. Étant donné que les réponses de @gmo et de @ siva semblent fonctionner avec les versions ultérieures, je m'en tiens à leurs réponses (et vous encourage à revenir au vote suivant) ... et j'espère bien sûr que votre journée sera fantastique.

74
Benjamin Oman

Juste comme référence supplémentaire, et un à jour (mai'14)(août 2015)(sep'16)(apr'17) ( mar'18 )...
Réponse qui fonctionne avec:

Chaînes vides:

Si le attr doit existe & pourrait n'a aucune valeur (ou pas du tout)

    jQuery("[href]");

Attributs manquants:

Si attr pourrait exister & s'il existe, must a une certaine valeur

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

Ou les deux:

Si attr doit existe & doit avoir une certaine valeur ...

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

[~ # ~] ps [~ # ~]: plusieurs combinaisons sont possibles ...

Vérifiez ce test dans jsFiddle pour des exemples:

Ou ici dans SO avec ceci extrait de code .

* Snippet exécute jQuery v2.1.1

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>
168
gmo
$('[data-go-to!=""]:[data-go-to]').each(function() {
    // Do Your Stuff
});​
19
Siva Charan

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

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

JS Fiddle démo .

Les références:

5
David Thomas

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

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

Est-ce que 'data-attributename' est vide ou non:

$('[data-attributename]')

JS Fiddle exemple

4
Jelgab

Selon le documentation cela devrait le faire

:not([attr="value"])

DÉMO

J'espère que cela t'aides

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

JSBIN

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

L'utilisation de :not, .not(), :empty, Etc., ne vérifiera que 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

2
adeneo

Ça marche pour moi

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

Essaye ça :

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

Cela fonctionne pour moi:

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