How to determine if an element has NO data-attr

Question

I have a sort of a niche case here.

So I'm building out a sidebar tool to utilize for quick note-taking, and I'm running into a problem without setting hundreds of data-attrs.

Currently, I have a dropdown menu that displays content that contains a specific data-attr based on the selection and hides the rest. The problem I'm encountering is I also want it to display all items that do not contain any data-attrs.

Is there a simple way to check if an item has no HTML defined data sets?

HTML:

<select id="ouSelect">
  <option></option>
  <option data-ou="aiv">AIV ***</option>    
  <option data-ou="appstore">Appstore ***</option>
  <option data-ou="firetv">Fire TV ***</option>
  <option data-ou="kindle">Kindle ***</option>
</select>

<ul id="stuffs">
  <li data-kindle="true">Kindle</li>
  <li>Generic</li>
  <li data-aiv="true">AIV</li>
  <li>Generic</li>
  <li data-firetv="true">FireTV</li>
  <li>Generic</li>
  <li data-appstore="true">Appstore</li>
  <li>Generic</li>
</ul>

jQuery:

$(function(){
  var ou = "";
  $('#ouSelect').change(function() {
    ou = $('#ouSelect option:selected').data('ou');
    ouSelected(ou);
  });
  function ouSelected(which){
    $('li').each(function(){
      if($(this).data(which) === undefined){
        $(this).hide();
      } else {
        $(this).show();
      }
    })
  }
});

CodePen: http://codepen.io/anon/pen/GyqoK

As you can see, all of the generic sets disappear when an option is selected. Ideally I'd want the items with data-kindle to display as well as items with no data-attrs at all.

Any ideas how to accomplish this? Any help is appreciated!

you found your answer [here](http://stackoverflow.com/questions/1894792/determining-if-a-javascript-object-has-a-given-property) — Claudio Santos, Jul 24 '14 at 18:35

score 2 · Accepted Answer · answered Jul 24 '14 at 18:38

2

Change your check to this:

if($(this).data(which) === undefined && Object.keys($(this).data()).length > 0)

answered Jul 24 '14 at 18:38

juvian

15,875
2
37
38

^ Perfect :-) Thank you! Always love a quick response. – Nicholas Hazel Jul 24 '14 at 18:41
Juvian - I looked you up and you're spamming downvotes. I will not accept your answer unless you correct that, because all of the answers work technically. – Nicholas Hazel Jul 24 '14 at 18:47
1

@NicholasHazel: How would you determine that? – Ry- Jul 24 '14 at 18:48
@NicholasHazel He did not downvote once today, his -2 rep is because his answer got downvoted aswell. – Karl-André Gagnon Jul 24 '14 at 18:51
@NicholasHazel as explained, haven´t made a single downvote today, just had my answer downvoted as well and that gives -2 rep as well – juvian Jul 24 '14 at 19:02
@NicholasHazel What makes you think downvoting is a bad thing? – kapa Jul 25 '14 at 09:45
It's not. But spamming them is. – Nicholas Hazel Jul 25 '14 at 18:39

score 0 · Answer 2 · answered Jul 24 '14 at 18:37

0

Given support for the dataset property, it’s as easy as:

Object.keys(element.dataset).length === 0

That’s not really appropriate, though. data-* attributes aren’t meant to interfere with each other, and they shouldn’t have dynamic names. How about identifying categories in a simpler way?

<li data-category="appstore">Appstore</li>

(Not given support for the dataset property, you can use

function hasDataAttributes(element) {
    for (var i = 0; i < element.attributes.length; i++) {
        var name = element.attributes[i].name;

        if (name.substring(0, 5) === 'data-') {
            return true;
        }
    }

    return false;
}

.)

answered Jul 24 '14 at 18:37

Ry-

218,210
55
464
476

^ Totally reasonable. I will end up doing that anyway :-) Regarding your original line, it seemed to only pull one li item. – Nicholas Hazel Jul 24 '14 at 18:40
@NicholasHazel: How did you use it? – Ry- Jul 24 '14 at 18:41
`if($(this).data(which) === undefined || $(this).keys(element.dataset).length ===0){` – Nicholas Hazel Jul 24 '14 at 18:43
@NicholasHazel: `Object.keys(this.dataset).length`. Literally “Object”. – Ry- Jul 24 '14 at 18:44
http://codepen.io/anon/pen/FCicn - Looks broken still. I already have my answer though :-) Thank you a ton for the help. None of these downvotes are from me btw. – Nicholas Hazel Jul 24 '14 at 18:46
@NicholasHazel: `this`, not `element`. – Ry- Jul 24 '14 at 18:47

How to determine if an element has NO data-attr

2 Answers2