Do not select elements that contain data attributes

Question

I have a selector that pulls in all anchor tags that start with the # symbol. I am trying to add a :not selector of some form for elements that have a data attribute. I know I could do the following...

$('a[href^="#"]:not([data-known])')

But the problem is that I don't know what the data attribute will be called. I have resorted to doing the following.

$('a[href^="#"]').click(function(event){
 if($.isEmptyObject($(this).data())){
 //custom code here
 }
}); 

Is there a way to avoid the if statement and add the :not to the original selector? Is there a better way of doing this period?

Here is a FIDDLE I have been playing in.

• Jozeidon: I think your best approach would be using jQuery.hasData() (even though you will still use an if statement).
• Joseph Silber: Why is that the best approach? I'd argue against it, since it anyhow calls isEmptyObject under the hood, but with a lot of extra code that's not needed in this case.
• Jozeidon: Because of the ease of usefulness; even though you make a good point.
• Joseph Silber: Actually, hasData simply won't work at all. hasData only checks for data that has been set via .data(). It doesn't automatically pull in the HTML5 data-* attributes.
• Joseph Silber: Here's a fiddle demonstrating my point above.

Answer 1

Very good question. I'm pretty sure this can't be done within the selector.

However, instead of checking the data every time it's clicked, filter the collection before applying the event listener:

$('a[href^="#"]').filter(function () {
 return $.isEmptyObject( $(this).data() );
}).click(function (event) {
 // Your code here...
});

---

If you don't care about IE, you can check the dataset property directly, which is much faster and much more reliable, since $(this).data() also contains any arbitrary data that might have been set (possibly by a plugin):

$('a[href^="#"]').filter(function () {
 return $.isEmptyObject( this.dataset );
})

---

If you find that you have to do this a lot, you can abstract it into a custom filter, which you can then use in your selectors:

jQuery.expr[':']['has-data'] = function (el) {
 return ! $.isEmptyObject( $(el).data() );
 // If you don't care about IE:
 // return ! $.isEmptyObject( el.dataset );
};

Then just use it throughout your code:

$('a[href^="#"]:not(:has-data)').click(function (event) {
 // Your code here...
});

• Blake Plumb: This is great! This solves the main issue I was facing with it having to call $.isEmptyObject() on every click.