Best IT Recipes

JQuery: select data attributes that are not empty?

I am trying to select all elements with a data-go-to attribute that is not empty.

I tried $('[data-go-to!=""]') , But, oddly enough, it seems like it selects every element on the page if I do this.

+71
javascript jquery jquery-selectors custom-data-attribute
May 17 '12 at 18:15
source share
11 answers

to try

 $(':not([data-go-to=""])')

UPDATE:

In order to not confuse anyone, this answer will work in earlier versions of jQuery, but it is not the future. Since the answers of @gmo and @siva both seem to work with later versions, I put off (and encourage you to uphold) my answers ... and, of course, hope you have a fantastic day.

+65
May 17 '12 at 18:20
source share

As an additional link and updated (may'14) (aug'15) (sep'16) ( apr'17 ) which works with:

Empty lines:

If attr must exists and can have any value (or nothing at all)

  jQuery("[href]");

Missing Attributes:

If attr can exist, but if it does, it must have some meaning

  jQuery("[href!='']");

Or both:

If attr should exist, but should have some meaning ...

  jQuery("[href!=''][href]");


PS : more combinations are possible ...



Check this test in jsFiddle for examples:



Or here in SO with this piece of code .

* Snippet launches jQuery v2.1.1

 jQuery('div.test_1 > a[href]').addClass('match'); jQuery('div.test_2 > a[href!=""]').addClass('match'); jQuery('div.test_3 > a[href!=""][href]').addClass('match'); 
 div,a { display: block; color: #333; margin: 5px; padding: 5px; border: 1px solid #333; } h4 { margin: 0; } a { width: 200px; background: #ccc; border-radius: 2px; text-decoration: none; } a.match { background-color: #16BB2A; position: relative; } a.match:after { content: 'Match!'; position: absolute; left: 105%; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test_1"> <h4>Test 1: jQuery('a[href]')</h4> <a href="test">href: test</a> <a href="#">href: #</a> <a href="">href: empty</a> <a>href: not present</a> </div> <div class="test_2"> <h4>Test 2: jQuery('a[href!=""]')</h4> <a href="test">href: test</a> <a href="#">href: #</a> <a href="">href: empty</a> <a>href: not present</a> </div> <div class="test_3"> <h4>Test 3: jQuery('a[href!=""][href]')</h4> <a href="test">href: test</a> <a href="#">href: #</a> <a href="">href: empty</a> <a>href: not present</a> </div>
+134
May 29 '14 at 22:28
source share
 $('[data-go-to!=""]:[data-go-to]').each(function() { // Do Your Stuff });​
+17
May 17 '12 at 18:28
source share

I'm not sure about a simple selector, but you can use filter() :

 $('[data-go-to]').filter( function(){ return ($(this).attr('data-go-to').length > 0); });

JS Fiddle demo .

Literature:

+5
May 17 '12 at 18:18
source share

According to the documentation this should do it

:not([attr="value"])

Demo

Hope this helps

+4
May 17 '12 at 18:19
source share

Has 'data-attributename' and its value is not empty:

 $('[data-attributename]:not([data-attributename=""])')

By default, 'data-attributename' is empty or not:

 $('[data-attributename]')

JS script example

+4
Jul 30 '14 at 18:02
source share
 $('[data-go-to]').filter(function() { return $(this).data('go-to')!=""; });

Using :not , .not() :empty , etc., it will only check if the element itself is empty, not a data attribute. To do this, you will have to filter based on the values ​​of the data attributes.

Fiddle

+2
May 17 '12 at 18:24
source share
 $('[data-go-to]:not([data-go-to=""])')

Jsbin

+2
Jul 17 '14 at 10:40
source share

It works for me

 $('[attributename]').filter('[attributename!=""]')
+1
Oct 08 '14 at 6:56
source share

Try the following:

 $('[data-go-to:not(:empty)]')
0
May 17 '12 at 18:19
source share

This works for me:

 $('.data .title td[data-field!=""]')
0
Jan 14 '15 at 13:15
source share


More articles:


All Articles