jQuery: Datenattribute auswählen, die nicht leer sind?

95

Ich versuche, alle Elemente auszuwählen, deren data-go-toAttribut nicht leer ist.

Ich habe es versucht, $('[data-go-to!=""]')aber seltsamerweise scheint es, als würde ich jedes einzelne Element auf der Seite auswählen, wenn ich das tue.

— Shpigford
quelle

76

Versuchen

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

AKTUALISIEREN:

Um niemanden in die Irre zu führen, funktioniert diese Antwort in älteren Versionen von jQuery, ist jedoch nicht zukunftssicher. Da die Antworten von @gmo und @ siva anscheinend mit späteren Versionen funktionieren, schiebe ich ihre Antworten zurück (und ermutige Sie, sie zu verbessern) ... und hoffe natürlich, dass Sie einen fantastischen Tag haben.

— Benjamin Oman
quelle

danke, das hat super geklappt! Ich wollte nur Bildelemente auswählen, also fügte ich $ (': not (img [data-go-to == ""]')

— msanjay

2

Wählt dies nicht alle Elemente aus, die kein leeres Attribut "Daten zum Mitnehmen" haben? Wann möchte der Fragesteller alle Elemente mit diesem Attribut, die nicht leer sind? (als Siva

— Charans

brauche auch keine doppelten Anführungszeichen ... wie in $('element:not([attribute=])'); // gets all of <element attribute="">oder$(':not([attribute=])'); // gets all of <* attribute="">

— Anthony Hatzopoulos

2

Dies bringt jedes Element für mich, einschließlich desjenigen, das das Datenattribut hat, das ich suche

— Devil's Advocate

Scheint in Safari nicht zu funktionieren, $('[data-go-to!=""]:[data-go-to]')tut es aber .

— Dan

183

Nur als weitere Referenz und ein aktuelles ^{(14. Mai) (15. August) (16. September) ( 17. April) (18. März) (19. März) (19. Mai )} ... ^20.^Mai ...
Antwort, die funktioniert mit:

Leere Zeichenfolgen:

Wenn das existieren muss & irgendeinen Wert haben könnte ^{(oder überhaupt keinen)}attr

    jQuery("[href]");

Fehlende Attribute:

Wenn existieren könnte & wenn existieren, muss ein Wert haben attr

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

Oder beides:

Wenn es existieren muss und einen Wert haben muss ... attr

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

^{PS : Weitere Kombinationen sind möglich ...}

Überprüfen Sie diesen Test in jsFiddle für Beispiele:

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 ^{Letzte jQuery-Version verfügbar in jsFiddle am 28. Mai 20}
jQuery Edge -> jsFiddle online test ^{jQuery Edge-Version (mit Vorsicht verwenden)}

Oder hier in SO mit diesem Code-Snippet .

^{* Snippet führt jQuery v2.1.1 aus}

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

— gmo
quelle

6

Das ist es. Stimmen Sie diesen Benutzer hier ab. Die anderen älteren Antworten funktionieren bei mir nicht. Ich habe das dritte Beispiel verwendet.

— Valamas

Abgeordnet @ Valamas-AUS

— Adam Waite

Bearbeiten: SO Code Snippet hinzugefügt, sodass Sie es hier testen können.

— GVO

Dies ist derjenige, der funktioniert. $(':not([data-go-to=""])')funktioniert nicht mehr

— Matthieu Charbonnier

1

Vielen Dank für die Aktualisierung der Antwort

— Anthony C

19

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

— Siva Charan
quelle

6

Dieser funktioniert für leere Zeichenfolgen und fehlende Attribute, perfekt

— adamJLev

4

ab Mai'14 funktioniert nicht, gibt Unrecognized ExpressionFehler.

— Coding_idiot

7

Hat 'data-attributename' und sein Wert ist nicht leer:

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

Hat 'data-attributename' leer oder nicht:

$('[data-attributename]')

JS Fiddle Beispiel

— Jelgab
quelle

1

Dies ist die einzige Antwort, die im Juni 2015 noch für mich funktioniert.

— AlexioVay

5

Ich bin mir bei einem einfachen Selektor nicht sicher, aber Sie könnten Folgendes verwenden filter():

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

JS Fiddle Demo .

Verweise:

filter().

— David sagt, Monica wieder einsetzen
quelle

4

Laut Dokumentation sollte dies der Fall sein

:not([attr="value"])

DEMO

Hoffe das hilft

— Dhiraj
quelle

3

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

JSBIN

— Shanimal
quelle

2

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

Mit :not, .not(), :emptywird etc nur prüfen , ob das Element selbst leer ist, nicht das Datenattribut. Dazu müssen Sie nach dem Wert der Datenattribute filtern.

GEIGE

— Adeneo
quelle

1

Das funktioniert bei mir

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

— Mardok
quelle

Dies sind jedoch zwei Iterationen.

— Jens

0

Versuche dies :

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

— Pascal Boutin
quelle

1

No Go. "Syntax error, unrecognized expression: [data-go-to:not(:empty)]"

— Shpigford

api.jquery.com/empty-selector api.jquery.com/not-selector Demnach würde man davon ausgehen, dass es funktioniert, traurig, das wäre eine saubere Lösung gewesen!

— Pascal Boutin

0

Das funktioniert bei mir:

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

— V. Kovpak
quelle