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>

Gabriele Petrioli · Accepted Answer · 2017-02-23 23:05:46Z

10

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>

answered Feb 23, 2017 at 23:05

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jonofan · Accepted Answer · 2017-02-23 23:02:40Z

5

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>

answered Feb 23, 2017 at 23:02

jonofan

3812 gold badges5 silver badges14 bronze badges

Comments

Hakan Kose · Accepted Answer · 2017-02-23 23:01:29Z

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>

answered Feb 23, 2017 at 23:01

Hakan Kose

1,6569 silver badges18 bronze badges

1 Comment

Manuel Temple Over a year ago

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

AVAVT · Accepted Answer · 2017-02-23 23:12:16Z

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>

Collectives™ on Stack Overflow

Check if data attribute exists without a value

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related