Existe uma maneira de verificar se existe um atributo de dados?

190

Existe alguma maneira de executar o seguinte:

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(', '));

Somente se houver um atributo chamado timer de dados no elemento com um ID de #dataTable?

Angela
fonte
Uma ressalva a ser observada é que, às vezes, não haverá nada armazenado em um data-atributo, mas haverá dados armazenados no jQuery e vice-versa.
Alex W

Respostas:

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

NOTA: isso retornará apenas truese o atributo de dados não for uma string vazia ou um valor "falsey", por exemplo, 0ou false.

Se você deseja verificar a existência do atributo de dados, mesmo que vazio, faça o seguinte:

if (typeof $("#dataTable").data('timer') !== 'undefined') {
  ...
}
Niiru
fonte
35
Outra opção para você: if ($("#dataTable[data-timer]").length) { ... }.
Visão
101
Seja cuidadoso! Isso é avaliado apenas como verdadeiro se o timer de dados tiver um valor. Se estiver presente, mas vazio, ele retornará falso.
21413 Kong
15
Kong está certo, se houver um valor vazio, seu código não funcionará. Em vez disso, use isso: if (typeof $ ("# dataTable"). Attr ('data-timer')! == "undefined") {...}
PierrickM 8/13/13
22
No entanto, outra versão que lhe dá um boolean real para sua condicional: if ( $("#dataTable").is("[data-timer]") ) { ... }. Também é mais útil se você já tiver uma referência à tabela em outro objeto jQuery.
Noyo
10
Retornará false se o valor existir e for igual a 0. Isso é peculiar.
Gherman
112
if (typeof $("#dataTable").data('timer') !== 'undefined')
{
    // your code here
}
Paul Fleming
fonte
@VisioN A prova de falhas combinação de seu e PierrickM comentário 's on esta resposta: if (typeof $('#dataTable').data('timer') !== 'undefined') ....
WynandB
3
@Wynand. Atualizado para refletir o seu e o comentário do VisioN.
Paul Fleming
1
@flem Você também precisa adicionar a typeofverificação
Brendan Bullen
1
@flem, @VisioN, suas abordagens falham no caso em que não há atributo de dados, mas os dados ainda foram definidos com o método .data (), por exemplo $('#dataTable').data('timer', Date.now()). Parece que o OP deseja verificar se o atributo de dados real está lá. A solução da @ niiru (ou a que você oferece em um comentário a essa solução) é melhor, neste caso.
Noyo
1
@VisioN Para mim, é uma verificação undefinedconsistente. Nós sabemos por que typeofé usado para verificar se há undefined, em alguns casos, mas eu encontrá-lo confuso para vê-lo sendo verificado com typeof em um lugar e sem em outro. Além disso, não é como usar typeofadiciona um monte mais complicado código. Pode ser mais explícito, talvez no máximo redundante, mas dificilmente complicado demais. Entendo o seu ponto, porém, mas diria que não usá-lo seria uma simplificação excessiva. ;]
WynandB
38

No interesse de fornecer uma resposta diferente das acima; você pode verificá-lo Object.hasOwnProperty(...)assim:

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

Como alternativa, se você tiver vários elementos de dados que deseja iterar, poderá variar o .data()objeto e iterá -lo da seguinte maneira:

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

Não dizendo que esta solução é melhor do que qualquer uma das outras aqui, mas pelo menos é outra abordagem ...

sadmicrowave
fonte
9
Isso é interessante, mas deve-se notar que, se você tem o atributo data-foo-bar, em seguida, o cheque deve ser .data().hasOwnProperty("fooBar"), não.data().hasOwnProperty("foo-bar")
dgmstuart
Interessante nesta instância com o validador javascript. O typeof retornou indefinido, mas funcionou!
Richard Housham
12

Ou combine com um pouco de baunilha JS

if ($("#dataTable").get(0).hasAttribute("data-timer")) {
  ...
}
Máx.
fonte
Eu gosto deste. No entanto, você cria os dados usando jQuery usando, em data()vez de attr(), ele não encontrará o atributo :(
Sam
10

Você pode usar o método hasData do jQuery.

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

A principal vantagem do jQuery.hasData (elemento) é que ele não cria e associa um objeto de dados ao elemento, se nenhum existir atualmente. Por outro lado, jQuery.data (elemento) sempre retorna um objeto de dados para o chamador, criando um se nenhum objeto de dados existia anteriormente.

Isso só verificará a existência de quaisquer objetos de dados (ou eventos) no seu elemento, não será possível confirmar se ele possui especificamente um objeto "timer".

BZink
fonte
10

Se você deseja distinguir entre valores vazios e valores ausentes, é possível usar o jQuery para verificar dessa maneira.

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

Então, a partir da pergunta original, você faria isso.

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

Você pode criar um plugin jQuery extremamente simples para consultar um elemento para isso:

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

Então você pode simplesmente usar $("#dataTable").hasData('timer')

Pegadinhas:

  • Retornará falseapenas se o valor não existir (é undefined); Se ele é definido como false/ nullele hasData()ainda vai voltar true.
  • É diferente do interno, $.hasData()que apenas verifica se algum dado no elemento está definido.
Alex
fonte
3

Descobri que isso funciona melhor com elementos de dados definidos dinamicamente:

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

Todas as respostas aqui usam a biblioteca jQuery.

Mas o javascript de baunilha é muito direto.

Se você quiser executar um script somente se o elemento com um idde #dataTable também tem um data-timeratributo, em seguida, as etapas são as seguintes:

// Locate the element

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

// Run conditional code

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

  [... CODE HERE...]

}
Rounin
fonte
2

Esta é a solução mais fácil na minha opinião é selecionar todo o elemento que possui determinado atributo de dados:

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(', '));

Aqui está a captura de tela de como funciona.

log do console do seletor jquery

Animesh Singh
fonte
1

Resposta errada - veja EDITAR no final

Deixe-me aproveitar a resposta de Alex.

Para impedir a criação de um objeto de dados, se ele não existir, seria melhor:

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

Então, onde $thisnão há objeto de dados criado, $.hasDataretorna falsee ele não será executado $this.data(key).

EDIT: função $.hasData(element)funciona apenas se os dados foram definidos usando $.data(element, key, value), não element.data(key, value). Por isso, minha resposta não está correta.

nestorrente
fonte
1

Eu precisava de um booleano simples para trabalhar. Como não é definido como não está presente e não é falso, eu uso o !!para converter em booleano:

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

Uma solução alternativa seria usar o filtro:

if( $("#dataTable").filter('[data-timer]').length!==0) { /* ....... */ }
Martijn
fonte
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
fonte
Se .data('timer')for indefinido, você obterá um TypeError: $ (...). Data (...) é indefinido ao verificar data.length. Essa é provavelmente a base da pergunta do OP, ou seja, garantir que alguém possa verificar com segurança em data.lengthoutro lugar. Além disso, você não seria capaz de dizer com certeza se dataé uma string, uma matriz ou um objeto, do qual o último pode ou não conter lengthcomo uma propriedade definida.
WynandB
Sim, minha resposta precisa de revisão. Escrito em 2012 .. Mas reescrevê-lo seria inútil, pois a resposta já é dada.
Luceos
0

Você pode verificar pela seleção de atributo css com

if ($('#dataTable').is('[data-timer]')) {
   // data-timer attribute exists
}
acme
fonte
3
Os valores dos dados nem sempre são armazenados como atributos do DOM. Quando você modifica os valores dos dados com o jQuery usando $ .data, ele os define como uma propriedade do elemento.
QWERTY
0

E sobre:

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