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

• <<    Attribute Equals Selector
• Attribute Starts With Selector     >>

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 examples below to narrow the search and improve performance.

Syntax

Parameters

Return

N/A.

Attribute Not Equal [attr!="value"] Examples 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(){
  $('#btn1').on('click', function() {
    $('h3[id!="notequal"]').css('backgroundColor', 'orange');
  });
}); 

A 'h3' heading 3 with no id attribute

The following example will select 'input' elements within the 'form' element below that have a type attribute that doesn't equal 'text' or a 'type' attribute that doesn't equal 'image' and change their borders colors to orange and yellow respectively.

When we press the left button any input elements that have a type attribute that doesn't equal 'text' will have 3px orange borders.

When we press the right button any input elements that have a type attribute that doesn't equal 'image' will have 3px yellow borders.

$(function(){
  $('#btn2').on('click', function() {
    $('.formfields2 input[type!="text"]').css('border', '3px solid orange');
  });
  $('#btn3').on('click', function() {
    $('.formfields2 input[type!="image"]').css('border', '3px solid yellow');
  });
}); 

Related Tutorials

jQuery Basic Tutorials - Lesson 4 - jQuery Selectors

• <<    Attribute Equals Selector
• Attribute Starts With Selector     >>