jQuery: Selecione os atributos de dados que não estão vazios?

95

Estou tentando selecionar todos os elementos que possuem um data-go-toatributo que não está vazio.

Eu tentei, $('[data-go-to!=""]')mas por incrível que pareça, parece que estou selecionando cada elemento da página se eu fizer isso.

— Shpigford
fonte

76

experimentar

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

ATUALIZAR:

Para não enganar ninguém, esta resposta funcionará em versões mais antigas do jQuery, mas não é à prova de futuro. Visto que as respostas de @gmo e @siva parecem estar funcionando com versões posteriores, eu adio (e encorajo você a votar positivamente) em suas respostas ... e é claro, espero que você tenha um dia fantástico.

— Benjamin Omã
fonte

obrigado, funcionou muito bem! Eu queria selecionar apenas elementos de imagem, então adicionei $ (': not (img [data-go-to == ""]')

— msanjay

2

Isso não seleciona todos os elementos que não têm um atributo 'data-to-go' em branco? Quando o autor da pergunta deseja todos os elementos com esse atributo que não estão em branco? (como a resposta de Siva Charan resolve)

— rodnaph

realmente não preciso de aspas duplas ... como em $('element:not([attribute=])'); // gets all of <element attribute="">ou$(':not([attribute=])'); // gets all of <* attribute="">

— Anthony Hatzopoulos

2

Isso pega todos os elementos para mim, incluindo aquele que tem o atributo de dados que estou procurando

— Devil's Advocate

Não parece funcionar no Safari, mas $('[data-go-to!=""]:[data-go-to]')funciona.

— Dan,

183

Apenas como referência adicional, e um up-to-date ^{(maio'14) (ago'15) (set'16) (abr'17) (mar'18) (mar'19) ( maio'20 )} ...
Resposta que funciona com:

Strings vazias:

Se o deve existir e pode ter qualquer valor ^{(ou nenhum)}attr

    jQuery("[href]");

Atributos ausentes:

Se poderia existir e se existir, deve ter algum valor attr

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

Ou ambos:

Se deve existir e deve ter algum valor ... attr

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

^{PS : mais combinações são possíveis ...}

Verifique este teste em jsFiddle para exemplos:

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 ^{Última versão do jQuery disponível em jsFiddle em 28 de maio de 20}
jQuery Edge -> jsFiddle online test ^{versão jQuery edge (use com cuidado)}

Ou aqui no SO com este snippet de código .

^{* Snippet está executando jQuery v2.1.1}

Exibir trecho de código

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>

Expandir trecho

— gmo
fonte

6

é isso. Vote neste usuário aqui. as outras respostas mais antigas não estão funcionando para mim. Usei o terceiro exemplo.

— Valamas

Destacado @ Valamas-AUS

— Adam Waite

Editar: Adicionado trecho de código SO, para que você possa testá-lo aqui.

— gmo

Este é o único que está funcionando. $(':not([data-go-to=""])')não está mais funcionando

— Matthieu Charbonnier

1

Obrigado por manter a resposta atualizada

— Anthony C

19

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

— Siva Charan
fonte

6

Este funciona para strings vazias e atributos ausentes, perfeito

— adamJLev

4

a partir de maio de 14 não funciona, dá Unrecognized Expressionerro.

— coding_idiot

7

Possui 'data-attributeename' e seu valor não está vazio:

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

Tem 'data-attributeename' vazio ou não:

$('[data-attributename]')

Exemplo JS Fiddle

— Jelgab
fonte

1

Esta é a única resposta que ainda funciona para mim em junho de 2015.

— AlexioVay

5

Não tenho certeza sobre um seletor simples, mas você pode usar filter():

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

Demonstração JS Fiddle .

Referências:

filter().

— David diz reintegrar Monica
fonte

4

De acordo com a documentação, isso deve servir

:not([attr="value"])

DEMO

Espero que isto ajude

— 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(), :emptyetc só irá verificar se o elemento em si está vazio, não o atributo de dados. Para isso, você terá que filtrar com base no valor dos atributos de dados.

FIDDLE

— adeneo
fonte

1

Isso funciona para mim

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

— Mardok
fonte

Porém, essas são duas iterações.

— Jens

0

Experimente isto:

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

— Pascal Boutin
fonte

1

Não vá. "Syntax error, unrecognized expression: [data-go-to:not(:empty)]"

— Shpigford

api.jquery.com/empty-selector api.jquery.com/not-selector De acordo com isso, seria suposto funcionar, infelizmente, teria sido uma solução limpa!

— Pascal Boutin

0

Isso funciona para mim:

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

— V. Kovpak
fonte