Attribute Not Equal [attr!="value"] JQ Home  <<  Selectors  <<  Attribute Not Equal [attr!="value"]

Attribute Value Non-Match selector.

Shorthand version $('[attr!="value"]')

Description

The [attr!="value"] selector, selects all elements that either don't have the specified attribute name, or do have the specified attribute but not with a value matching the specified string.

Being a jQuery extension the [attr!="value"] pseudo selector is not part of any current CSS specification. Therefore [attr!="value"] cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method.

The same results can be achieved with valid CSS using $("CSSselector").not('[name="value"]'), without the hit to performance.

If this selector is not preceded by another selector, the universal selector ("*") is implied and so the whole DOM will be searched. Use another selector as in the example below to narrow the search and improve performance.

Syntax

Signature Description
jQuery('[attr!="value"]')Attribute Value Non-Match

Parameters

Parameter Description
attrThe attribute name.
valueThe attribute value which can be either an unquoted single word or a quoted string.

Return

N/A.

Attribute Not Equal [attr!="value"] Example Selectors  <<  Top

Selects all elements that either don't have the specified attribute name, or do have the specified attribute but not with a value matching the specified string.

The following example will select all 'h3' elements that don't have the id attribute with a value of 'notequal' and turn the background colour orange.




$(function(){
  $('#btn16').on('click', function() {
    $('h3[id!="notequal"]').css('backgroundColor', 'orange');
  });
}); 


Press the buttons below to action the above code:

Related Tutorials

jQuery Basic Tutorials - Lesson 4 - jQuery Selectors