webentwicklung-frage-antwort-db.com.de

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

Ich versuche, alle Elemente auszuwählen, deren Attribut data-go-to Nicht leer ist.

Ich habe $('[data-go-to!=""]') ausprobiert, aber seltsamerweise scheint es, dass jedes einzelne Element auf der Seite ausgewählt wird, wenn ich das tue.

javascriptjqueryjquery-selectorscustom-data-attribute
86
Shpigford

versuchen

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

AKTUALISIEREN:

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

74
Benjamin Oman

Nur als weitere Referenz und eine aktuelle  (14. Mai)(15. August)(16. September)(17. April) ( mar'18 ) ...
Antwort, die funktioniert mit:

Leere Zeichenfolgen:

Wenn das attr muss vorhanden & könnte einen beliebigen Wert haben (oder gar keine)

    jQuery("[href]");

Fehlende Attribute:

Wenn attr könnte exist & if exist, muss einen Wert haben

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

Oder beides:

If attr muss exist & muss einen Wert haben ...

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

[~ # ~] ps [~ # ~] : more Kombinationen sind möglich ...

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

Oder hier in SO mit diesem Code Snippet .

* Snippet führt jQuery v2.1.1 aus 

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

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

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

JS Fiddle Demo .

Verweise:

5
David Thomas

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

4
Jelgab

Laut der Dokumentation sollte dies so sein

:not([attr="value"])

DEMO

Hoffe das hilft

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

JSBIN

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

Mit :not, .not(), :empty Etc wird nur geprüft, ob das Element selbst leer ist, nicht das Datenattribut. Dazu müssen Sie basierend auf dem Wert der Datenattribute filtern.

GEIGE

2
adeneo

Das funktioniert bei mir

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

Versuche dies :

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

Das funktioniert bei mir:

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