How do I target attribute of opacity in jquery?

Question

I know about the attributeContains selector, but how does it apply to style attributes?

I want to find all <a> tags that have their opacity set to 0.

I tried this :

$("a[style*='opacity: 0']")

But it returns nothing.

Answer 1

If you want to know whether or not an element is visible, use:

$('a:not(:visible)');

Answer 2

$('a:not(:visible)')

Your code won't work as it only works when the opacity is applied on the element's style attribute - what about CSS styles??? they won't apply. jQuery provides the :visible and :not selectors, so you can combine them. http://api.jquery.com/category/selectors/

Answer 3

The :visible selector will not work because it doesn't give consideration to opacity.

To target just those with a 0 opacity, you could use a .filter() to check the .css() value of the opacity:

$("a").filter( function() {
    return $(this).css('opacity') === '0';
});

You could create your own selector if you'd like:

$.extend($.expr[':'], {
    opacity: function(elem, i, attr){
      return( $(elem).css("opacity") === attr[3] + '' );
    }
});

var $invisible = $("a:opacity(0)");

or

$.extend($.expr[':'], {
    transparent: function(elem, i, attr){
      return( $(elem).css("opacity") === "0" );
    }
});

var $invisible = $("a:transparent");