.not() JQ Home Right Arrow JQ Reference Right Arrow .not()

Filter a subset of elements.

Description

The .not() method is used to compare the matched set against a specified selector, element, jQuery object or function and return elements that don't match the given arguments.

Syntax


Signature Description
.not( selector )Reduce the matched set to elements not matching the selector.
.not( element )Reduce the matched set to elements not matching the element.
.not( jQuery object )Reduce the matched set to elements not matching the jQuery object.
.not( function(index) )Pass each element within the current matched set through a function.

Parameters


Parameter Description Type
selectorA string containing a CSS or custom jQuery selector to match elements against.Selector
elementAn element to match elements against.Element
jQuery objectA jQuery object to match elements against.jQuery
function(index)A function.
  • Each time the callback runs, it is passed the current index position of the element in the set.
  • The callback is fired in the context of the current element in the set, so the keyword this refers to that element.
Function

Return

A jQuery object containing the filtered subset of elements.


.not( selector ) Examplego to JQ reference JQ Ref.   go to top of page Top

Reduce the matched set to elements not matching the selector.

In the example below we select all 'td' elements within the table with an id of 'testtable' and then filter out the 'td' element with the id of 'tdid1', changing the background colour of the remaining elements to olive.


Table For Testing The .not( selector ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 (id of tdid1) Table Row 2, Table Data 2



$(function(){
  $('#btn17').on('click', function() {
    $('.testtable td').not('#tdid1')
                      .css('backgroundColor', 'olive'); 
  });
});

Press the button below to action the above code:



.not( element ) Examplego to JQ reference JQ Ref.   go to top of page Top

Reduce the matched set to elements not matching the element.

In the example below we select all elements within the table with an id of 'testtable2' and then filter out the 'th' element , changing the background colour to orange.


Table For Testing The .not( element ) Signature
Heading 1 Description 1
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Heading 1 Description 1
Table Row 2, Table Data 1 Table Row 2, Table Data 2



$(function(){
  $('#btn18').on('click', function() {
    $('.testtable2 *').not('th').css('backgroundColor', 'orange'); 
  });
});

Press the button below to action the above code:



.not( jQuery object ) Examplego to JQ reference JQ Ref.   go to top of page Top

Reduce the matched set to elements not matching the jQuery object.

In the example below we select all 'td' elements with a class of 'class1', within the table with a class of 'testtable2' and save them to a jQuery object. We then iterate over all 'td' elements within the table changing the background colour to silver, if the 'td' element DOES NOT match an element in our saved jQuery object.


Table For Testing The .not( jQuery object ) Signature
Table Row 1, Table Data 1 (class of class1) Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2 (class of class1)



$(function(){
  $('#btn19').on('click', function() {
    var $td = $('.testtable3 .class1');
    $('.testtable3 td').not($td).css('backgroundColor', 'silver'); 
  });
});

Press the button below to action the above code:



.not( function(index) ) Examplego to JQ reference JQ Ref.   go to top of page Top

Pass each element within the current matched set through a function.

  • If the function returns true, the element will NOT be included in the filtered set.

In the example below when you press the button within the table with a class of 'testtable4, we change the background colour to yellow, dependant upon that cell NOT having a 'strong' element within it.


Table For Testing The .not( function(index) ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2



$(function(){
  $('#btn20').on('click', function() {
    $('.testtable4 td').not(function(index) {
       return $('strong', this).length == 1;
   	}).css('background-color', 'yellow');
  });
});

Press the button below to action the above code:



Related Tutorials

jQuery Intermediate Tutorials - Lesson 1 - Filtering Elements

<<  .map()                         .slice()  >>

go to jQuery home page jQuery Homepage go to JQ reference jQuery Reference go to top of page Top

All the jQuery version 1.10.1 filtering methods are listed below. Click a link to go to a particular method.

Filtering

.eq()

.filter()

.first()

.has()

.is()

.last()

.map()

.not()

.slice()