¿Hay alguna forma de verificar si existe un atributo de datos?

190

¿Hay alguna manera de que pueda ejecutar lo siguiente:

var data = $("#dataTable").data('timer');
var diffs = [];

for(var i = 0; i + 1 < data.length; i++) {
    diffs[i] = data[i + 1] - data[i];
}

alert(diffs.join(', '));

¿Solo si hay un atributo llamado data-timer en el elemento con un id de #dataTable?

Angela
fuente
Una advertencia a tener en cuenta es que a veces no habrá nada almacenado en un data-atributo, pero habrá datos almacenados en jQuery y viceversa.
Alex W

Respuestas:

295
if ($("#dataTable").data('timer')) {
  ...
}

NOTA: esto solo se devuelve truesi el atributo de datos no es una cadena vacía o un valor "falsey", por ejemplo, 0o false.

Si desea verificar la existencia del atributo de datos, incluso si está vacío, haga lo siguiente:

if (typeof $("#dataTable").data('timer') !== 'undefined') {
  ...
}
niiru
fuente
35
Otra opción para usted: if ($("#dataTable[data-timer]").length) { ... }.
VisioN
101
¡Ten cuidado! Esto solo se evalúa como verdadero si el temporizador de datos tiene un valor. Si está presente, pero vacío, devolverá falso.
Kong
15
Kong tiene razón, si hay un valor vacío, su código no funciona. Utilice esto en su lugar: if (typeof $ ("# dataTable"). Attr ('data-timer')! == "undefined") {...}
PierrickM
22
Sin embargo, otra versión que le da un verdadero booleano para su condicional: if ( $("#dataTable").is("[data-timer]") ) { ... }. También es más útil si ya tiene una referencia a la tabla en otro objeto jQuery.
Noyo
10
Volverá falso si el valor existe y es igual a 0. Esto es peculiar.
Gherman
112
if (typeof $("#dataTable").data('timer') !== 'undefined')
{
    // your code here
}
Paul Fleming
fuente
@VisioN Una prueba de fallos y combinación de su PierrickM comentario 's en esta respuesta: if (typeof $('#dataTable').data('timer') !== 'undefined') ....
WynandB
3
@Wynand. Actualizado para reflejar el suyo y el comentario de VisioN.
Paul Fleming el
1
@flem También debe agregar el typeofcheque
Brendan Bullen
1
@flem, @VisioN, sus enfoques fallan en el caso de que no haya un atributo de datos, pero los datos aún se han establecido con el método .data (), por ejemplo $('#dataTable').data('timer', Date.now()). Parece que el OP quiere verificar que el atributo de datos real esté allí. La solución de @niiru (o la que ofreces en un comentario a esa solución) es mejor, en este caso.
Noyo
1
@VisioN Para mí se trata de verificar de undefinedmanera consistente. Sabemos por qué typeofse usa para verificar undefineden algunos casos, pero me resultaría confuso ver que se verifica con typeof un lugar y sin otro. Además, no es como usar typeofagrega código mucho más complicado . Puede ser más explícito, quizás redundante a lo sumo, pero difícilmente demasiado complicado. Sin embargo, veo su punto, pero diría que no usarlo sería una simplificación excesiva. ;]
WynandB
38

En el interés de proporcionar una respuesta diferente de las anteriores; podrías verificarlo Object.hasOwnProperty(...)así:

 if( $("#dataTable").data().hasOwnProperty("timer") ){
     // the data-time property exists, now do you business! .....
 }

alternativamente, si tiene múltiples elementos de datos sobre los que desea iterar, puede hacer una variablización del .data()objeto e iterar sobre él de esta manera:

 var objData = $("#dataTable").data();
 for ( data in objData ){
      if( data == 'timer' ){
            //...do the do
      }
 }

No digo que esta solución sea mejor que ninguna de las otras aquí, pero al menos es otro enfoque ...

microondas
fuente
9
Esto es interesante, pero debe tenerse en cuenta que si tiene el atributo, data-foo-barentonces su cheque debe ser .data().hasOwnProperty("fooBar"), no.data().hasOwnProperty("foo-bar")
dgmstuart
Interesante en este caso con el validador de JavaScript. El tipo de retorno volvió indefinido, ¡pero esto funcionó!
Richard Housham
12

O combinar con un poco de vainilla JS

if ($("#dataTable").get(0).hasAttribute("data-timer")) {
  ...
}
Max
fuente
Me gusta este. Sin embargo, crea los datos usando jQuery usando en data()lugar de attr(), no encontrará el atributo :(
Sam hace
10

Puede usar el método hasData de jQuery.

http://api.jquery.com/jQuery.hasData/

La principal ventaja de jQuery.hasData (elemento) es que no crea y asocia un objeto de datos con el elemento si actualmente no existe ninguno. Por el contrario, jQuery.data (elemento) siempre devuelve un objeto de datos a la persona que llama, creando uno si no existía previamente ningún objeto de datos.

Esto solo verificará la existencia de objetos de datos (o eventos) en su elemento, no podrá confirmar si tiene específicamente un objeto "temporizador".

BZink
fuente
10

Si desea distinguir entre valores vacíos y valores perdidos, puede usar jQuery para verificar de esta manera.

<div id="element" data-foo="bar" data-empty=""></div>

<script>
"foo" in $('#element').data(); // true
"empty" in $('#element').data(); // true
"other" in $('#element').data(); // false
</script>

Entonces, de la pregunta original, harías esto.

if("timer" in $("#dataTable").data()) {
  // code
}
Ryan
fuente
7

Puede crear un complemento jQuery extremadamente simple para consultar un elemento para esto:

$.fn.hasData = function(key) {
  return (typeof $(this).data(key) != 'undefined');
};

Entonces puedes simplemente usar $("#dataTable").hasData('timer')

Gotchas:

  • falseSolo se devolverá si el valor no existe (es undefined); si está configurado en false/ null, hasData()seguirá regresando true.
  • Es diferente del incorporado $.hasData()que solo comprueba si se ha establecido algún dato en el elemento.
Alex
fuente
3

He descubierto que esto funciona mejor con elementos de datos establecidos dinámicamente:

if ($("#myelement").data('myfield')) {
  ...
}
JerSchneid
fuente
3

Todas las respuestas aquí usan la biblioteca jQuery.

Pero el Javascript de vainilla es muy sencillo.

Si desea ejecutar un script solo si el elemento con un idde #dataTable también tiene un data-timeratributo, los pasos son los siguientes:

// Locate the element

const myElement = document.getElementById('dataTable');

// Run conditional code

if (myElement.dataset.hasOwnProperty('timer')) {

  [... CODE HERE...]

}
Rounin
fuente
2

Esta es la solución más fácil en mi opinión es seleccionar todo el elemento que tiene cierto atributo de datos:

var data = $("#dataTable[data-timer]");
var diffs = [];

for(var i = 0; i + 1 < data.length; i++) {
    diffs[i] = data[i + 1] - data[i];
}

alert(diffs.join(', '));

Aquí está la captura de pantalla de cómo funciona.

registro de consola del selector jquery

Animesh Singh
fuente
1

Respuesta incorrecta: vea EDITAR al final

Déjame construir sobre la respuesta de Alex.

Para evitar la creación de un objeto de datos si no existe, mejor lo hago:

$.fn.hasData = function(key) {
    var $this = $(this);
    return $.hasData($this) && typeof $this.data(key) !== 'undefined';
};

Luego, donde $thisno se ha creado ningún objeto de datos, $.hasDataregresa falsey no se ejecutará$this.data(key) .

EDITAR: la función $.hasData(element)solo funciona si los datos se configuraron usando $.data(element, key, value), no element.data(key, value). Debido a eso, mi respuesta no es correcta.

nestorrente
fuente
1

Necesitaba un booleano simple para trabajar. Debido a que no está definido como no presente y no es falso, uso el !!para convertir a booleano:

var hasTimer = !!$("#dataTable").data('timer');
if( hasTimer ){ /* ....... */ }

Una solución alternativa sería usar filtro:

if( $("#dataTable").filter('[data-timer]').length!==0) { /* ....... */ }
Martijn
fuente
0
var data = $("#dataTable").data('timer');
var diffs = [];

if( data.length > 0 ) {
for(var i = 0; i + 1 < data.length; i++) {
    diffs[i] = data[i + 1] - data[i];
}

alert(diffs.join(', '));
}
Luceos
fuente
Si .data('timer')no está definido, obtendrá un TypeError: $ (...). Data (...) no está definido al verificar data.length. Esta es probablemente la base de la pregunta del OP, es decir, asegurarse de que se pueda verificar con seguridad en data.lengthotro lugar. Además, no necesariamente podría decir con certeza si dataes una cadena, una matriz o un objeto, de los cuales este último puede contener o no lengthcomo una propiedad definida.
WynandB
Sí, mi respuesta necesita revisión. Escrito en 2012 ... Pero reescribirlo sería inútil ya que la respuesta ya está dada.
Luceos
0

Puede verificar por selección de atributo css con

if ($('#dataTable').is('[data-timer]')) {
   // data-timer attribute exists
}
cumbre
fuente
3
Los valores de datos no siempre se almacenan como atributos DOM. Cuando modifica valores de datos con jQuery usando $ .data, lo establece como una propiedad de elemento.
qwerty
0

Y que hay con:

if ($('#dataTable[data-timer]').length > 0) {
    // logic here
}
dani24
fuente