jQuery: ¿Seleccionar atributos de datos que no están vacíos?

95

Estoy tratando de seleccionar todos los elementos que tienen un data-go-toatributo que no está vacío.

Lo he intentado, $('[data-go-to!=""]')pero por extraño que parezca, parece estar seleccionando cada elemento en la página si hago eso.

— Shpigford
fuente

76

tratar

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

ACTUALIZAR:

Para no desviar a nadie, esta respuesta funcionará en versiones anteriores de jQuery, pero no está preparada para el futuro. Dado que las respuestas de @gmo y @ siva parecen funcionar con versiones posteriores, aplazo (y les animo a que voten a favor) sus respuestas ... y, por supuesto, espero que tengan un día fantástico.

— Benjamin Omán
fuente

gracias, esto funcionó muy bien! Quería seleccionar solo elementos de imagen, así que agregué $ (': not (img [data-go-to == ""]')

— msanjay

2

¿No selecciona esto todos los elementos que no tienen un atributo 'data-to-go' en blanco? ¿Cuando el autor de la pregunta quiere todos los elementos con ese atributo que no están en blanco? (como se resuelve la respuesta de Siva Charan)

— rodnaph

tampoco necesito comillas dobles ... como en $('element:not([attribute=])'); // gets all of <element attribute="">o$(':not([attribute=])'); // gets all of <* attribute="">

— Anthony Hatzopoulos

2

Esto obtiene todos los elementos para mí, incluido el que tiene el atributo de datos que estoy buscando

— Abogado del Diablo

No parece funcionar en Safari, pero lo $('[data-go-to!=""]:[data-go-to]')hace.

— Dan

184

Solo como referencia adicional, y una actualización ^{(may'14) (aug'15) (sep'16) (apr'17) (mar'18) (mar'19) ( may'20 )} ...
Respuesta que funciona con:

Cadenas vacías:

Si debe existir y podría tener algún valor ^{(o ninguno)}attr

    jQuery("[href]");

Atributos faltantes:

Si pudiera existir y si existe, debe tener algún valor attr

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

O ambos:

Si debe existir y tiene que tener algún valor ... attr

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

^{PD : más combinaciones son posibles ...}

Verifique esta prueba en jsFiddle para ver ejemplos:

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 versión de jQuery disponible en jsFiddle el 28 de mayo de 2020}
jQuery Edge -> jsFiddle online test ^{Versión de jQuery edge (usar con precaución)}

O aquí en SO con este fragmento de código .

^{* El fragmento está ejecutando jQuery v2.1.1}

Mostrar fragmento 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 fragmento

— gmo
fuente

6

eso es todo. Vota a este usuario aquí mismo. las otras respuestas anteriores no me funcionan. Usé el tercer ejemplo.

— Valamas

Secundado @ Valamas-AUS

— Adam Waite

Editar: Se agregó un fragmento de código SO, para que pueda probarlo aquí mismo.

— GMO

Este es el que está funcionando. $(':not([data-go-to=""])')ya no funciona

— Matthieu Charbonnier

1

Gracias por mantener la respuesta actualizada

— Anthony C

19

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

— Siva Charan
fuente

6

Esta funciona para las cadenas vacías y atributos que faltan, perfectos

— adamJLev

4

a partir de mayo'14 no funciona, da Unrecognized Expressionerror.

— coding_idiot

7

Tiene 'nombre de atributo de datos' y su valor no está vacío:

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

Tiene 'nombre de atributo de datos' vacío o no:

$('[data-attributename]')

Ejemplo de JS Fiddle

— Jelgab
fuente

1

Esta es la única respuesta que todavía me funciona en junio de 2015.

— AlexioVay

5

No estoy seguro de un selector simple, pero podrías usar filter():

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

Demostración de JS Fiddle .

Referencias:

filter().

— David dice reinstalar a Monica
fuente

4

Según la documentación esto debería hacerlo

:not([attr="value"])

MANIFESTACIÓN

Espero que esto ayude

— Dhiraj
fuente

3

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

JSBIN

— Shanimal
fuente

2

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

Utilizando :not, .not(), :emptyetc sólo se comprobará si el propio elemento está vacío, no el atributo de datos. Para eso, tendrá que filtrar según el valor de los atributos de datos.

VIOLÍN

— adeneo
fuente

1

Esto funciona para mi

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

— Mardok
fuente

Sin embargo, estas son dos iteraciones.

— Jens

0

Prueba esto :

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

— Pascal Boutin
fuente

1

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

— Shpigford

api.jquery.com/empty-selector api.jquery.com/not-selector De acuerdo con esto, se suponía que funcionaría, triste, ¡habría sido una solución limpia!

— Pascal Boutin

0

Esto funciona para mi:

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

— V. Kovpak
fuente