Check if data attribute exists without a value

Question

My goal is to add some jQuery to a project that will check to see if an element has a data-attribute without a value. For instance, with the video tag you can just add autoplay without a value and it will autoplay. I am attempting to do the same thing and wondering if it is possible. Here's what I tried, but it's returning false currently:

$(function() {
  $('div').click(function() {
    if ($(this).attr('data-specs')) {
      console.log('has specs');
    } else {
      console.log('no specs');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-specs>Specs</div>

Empanel

Answer 1

Through jQuery you can use the .is(selector) method.

So if you set the selector to an attribute one, you can do your check

$(function() {
  $('div').click(function() {
    if ($(this).is('[data-specs]')) {
      console.log('has specs');
    } else {
      console.log('no specs');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-specs>Specs</div>

Claw

Answer 2

You can use this.hasAttribute('data-specs') instead.

$(function() {
  $('div').click(function() {
    if (this.hasAttribute('data-specs')) {
      console.log('has specs');
    } else {
      console.log('no specs');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-specs>Specs</div>

Matamoros

Answer 3

What you get now is a empty value so you can check it as

if (typeof $(this).attr('data-specs') !== "undefined") {

OR

if ($(this).attr('data-specs') !== "") {

$(function() {
  $('div').click(function() {
    if (typeof $(this).attr('data-specs') !== "undefined" || $(this).attr('data-specs') === "") {
      console.log('has specs');
    } else {
      console.log('no specs');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-specs>Specs</div>

<div data-no-specs>No specs</div>

Daric

I think it's what you're looking for but it really works if the field does not exist in the DIV (<div> Specs </ div>) – Conductivity

Answer 4

I would suppose this is what you want:

$(function() {
  $('div[data-specs=""]').click(function(){
    console.log('has atrribute, no value');
  });
  $('div[data-specs][data-specs!=""]').click(function(){
    console.log('has atrribute, has value');
  });
  $('div[data-specs]').click(function(){
    console.log('has atrribute regardless of value');
  });
  $('div:not([data-specs])').click(function(){
    console.log('no atrribute');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-specs>Has atrribute, no value</div>
<div data-specs="some-specs">Has atrribute, has value</div>
<div>No atrribute</div>

A shortened form for a click check:

$(function() {
  $('div').click(function(){
    if($(this).is('div[data-specs=""]')) console.log('has atrribute, no value');
    if($(this).is('div[data-specs][data-specs!=""]')) console.log('has atrribute, has value');
    if($(this).is('div[data-specs]')) console.log('has atrribute regardless of value');
    if($(this).is('div:not([data-specs])')) console.log('no atrribute');
    console.log("----");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-specs>Has atrribute, no value</div>
<div data-specs="some-specs">Has atrribute, has value</div>
<div>No atrribute</div>

Infuse