jQuery: selezionare gli attributi dei dati che non sono vuoti?

95

Sto cercando di selezionare tutti gli elementi che hanno un data-go-toattributo che non è vuoto.

Ho provato, $('[data-go-to!=""]')ma stranamente sembra che stia selezionando ogni singolo elemento della pagina se lo faccio.

— Shpigford
fonte

76

provare

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

AGGIORNARE:

Per non portare nessuno fuori strada, questa risposta funzionerà nelle versioni precedenti di jQuery ma non è a prova di futuro. Dal momento che le risposte di @gmo e @ siva sembrano entrambe funzionare con le versioni successive, rimando alle loro risposte (e ti incoraggio a votare a favore) .... e ovviamente spero che tu abbia una giornata fantastica.

— Benjamin Oman
fonte

grazie, ha funzionato benissimo! Volevo selezionare solo gli elementi dell'immagine, quindi ho aggiunto $ (': not (img [data-go-to == ""]')

— msanjay

2

Questo non seleziona tutti gli elementi che non hanno un attributo "data-to-go" vuoto? Quando il richiedente desidera che tutti gli elementi con quell'attributo non siano vuoti? (come si risolve la risposta di Siva Charan)

— rodnaf

non ho davvero bisogno di virgolette doppie ... come in $('element:not([attribute=])'); // gets all of <element attribute="">o$(':not([attribute=])'); // gets all of <* attribute="">

— Anthony Hatzopoulos

2

Questo ottiene ogni elemento per me, incluso quello che ha l'attributo di dati che sto cercando

— Devil's Advocate,

Non sembra funzionare in Safari ma $('[data-go-to!=""]:[data-go-to]')funziona.

— Dan

183

Proprio come ulteriore riferimento, e un aggiornamento ^{(maggio'14) (ago'15) (settembre'16) (apr'17) (mar'18) (mar'19) ( maggio'20 )} ...
Risposta che funziona con:

Stringhe vuote:

Se il deve esistere e potrebbe avere un valore ^{(o nessuno)}attr

    jQuery("[href]");

Attributi mancanti:

Se potesse esistere e se esistesse, deve avere un valore attr

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

O entrambi:

Se deve esistere e deve avere un valore ... attr

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

^{PS : sono possibili più combinazioni ...}

Controlla questo test in jsFiddle per esempi:

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 ^{Ultima versione di jQuery disponibile in jsFiddle al 28 maggio 20}
jQuery Edge -> jsFiddle online test ^{jQuery edge version (usare con cautela)}

O qui in SO con questo frammento di codice .

^{* Snippet esegue jQuery v2.1.1}

Mostra snippet di codice

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>

Espandi lo snippet

— ogm
fonte

6

questo è. Dai un voto positivo a questo utente qui. le altre risposte più vecchie non funzionano per me. Ho usato il terzo esempio.

— Valamas

Seconded @ Valamas-AUS

— Adam Waite

Modifica: aggiunto lo snippet di codice SO, quindi puoi testarlo qui.

— OGM

Questo è quello che funziona. $(':not([data-go-to=""])')non funziona più

— Matthieu Charbonnier

1

Grazie per mantenere la risposta aggiornata

— Anthony C

19

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

— Siva Charan
fonte

6

Questo funziona per stringhe vuote e attributi mancanti, perfetto

— adamJLev

4

a partire da maggio 14 non funziona, dà Unrecognized Expressionerrore.

— coding_idiot

7

Ha "data-attributename" e il suo valore non è vuoto:

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

Ha "data-attributename" vuoto o meno:

$('[data-attributename]')

Esempio di JS Fiddle

— Jelgab
fonte

1

Questa è l'unica risposta che funziona ancora per me nel giugno 2015.

— AlexioVay

5

Non sono sicuro di un semplice selettore, ma potresti usare filter():

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

Demo di JS Fiddle .

Riferimenti:

filter().

— David dice di reintegrare Monica
fonte

4

Secondo la documentazione questo dovrebbe farlo

:not([attr="value"])

DEMO

Spero che questo ti aiuti

— Dhiraj
fonte

3

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

JSBIN

— Shanimal
fonte

2

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

Usando :not, .not(), :emptyecc controllerà solo se l'elemento stesso è, non l'attributo di dati vuoto. Per questo dovrai filtrare in base al valore degli attributi dei dati.

VIOLINO

— adeneo
fonte

1

Questo funziona per me

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

— Mardok
fonte

Queste sono però due iterazioni.

— Jens

0

Prova questo :

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

— Pascal Boutin
fonte

1

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

— Shpigford

api.jquery.com/empty-selector api.jquery.com/not-selector Secondo questo, si suppone che funzioni, triste, sarebbe stata una soluzione pulita!

— Pascal Boutin

0

Questo funziona per me:

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

— V. Kovpak
fonte