.not()S2C Home « Filtering « .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 ) ExampleTop

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 ) ExampleTop

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 ) ExampleTop

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) ) ExampleTop

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: