Check if data attribute exists without value

Question

My goal is to add jQuery to a project that will check if an element has data-attributeno value. For example, with a tag, videoyou can simply add autoplaywithout a value, and it will automatically start. I try to do the same and wonder if this is possible. Here is what I tried, but now it returns false:

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

Run codeHide result

Answer 1

In jQuery you can use a method .is(selector).

So, if you set the selector to one attribute, 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>

Run codeHide result

Answer 2

,

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

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>

Hide result

Answer 3

this.hasAttribute('data-specs').

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

Hide result

Answer 4

, , :

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

Hide result

:

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

Hide result