Home > Article > Web Front-end > Detailed explanation of the usage of jQuery.not(selector)

Detailed explanation of the usage of jQuery.not(selector)

巴扎黑Original: 2017-06-22 17:51:572400browse

.not(selector) Returns: jQuery

Description: Remove elements from the set of matching elements.

Version added: 1.0.not (selector)

Selection

Type: selector or element or array

Contains selector expression, DOM Element or a string of arrays of elements that match this set.

Version increase: 1.4. (Function)

Function

Type: Function (integer index, element element) => boolean

Function used as a test for each element in the collection. It accepts two parameters, index which is the index of the element in the jQuery collection element which is the DOM element. Within this function, this refers to the current DOM element.

Version added: 1.4 Unselected (selected)

Selected

Type: jQuery

An existing jQuery object to match the current group of elements .

Given a jQuery object representing a set of DOM elements.not(), this method constructs a new jQuery object from a subset of matching elements. The provided selector is tested against each element; elements that do not match the selector will be included in the result.

Consider a page with a simple list:

五

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

We can apply this method to a set of list items:

$( "li" ).not( ":even" ).css( "background-color", "red" );

The result of this call is the red background for items 2 and 4 because they don't match the selector (recall: even:odd uses an index of 0).

Remove specific elements

The second version of the .not() method allows us to remove elements from the matching set, assuming we have previously found these elements through other methods. For example, let's say our list has an id applied to one of its items:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li id="notli">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

We can get the third list item using the native JavaScript getElementById() function and then get the third list item from the jQuery object Delete it:

$( "li" ).not( document.getElementById( "notli" ) )
  .css( "background-color", "red" );

This statement changes the color of items 1, 2, 4 and 5. We could accomplish the same thing using simpler jQuery expressions, but this technique would be useful when, for example, other libraries provide references to pure DOM nodes.

Starting with jQuery 1.4, the .not() method can take a function as its argument in the same way as .filter(). Elements returned by the function true are excluded from the filtered collection; all other elements are included.

Note: When CSS selector string is passed to .not(), text and comment nodes will always be removed from the resulting jQuery object during the filtering process. When providing a specific node or array of nodes, the text or comment node will only be removed from the jQuery object if it matches one of the nodes in the filtered array.

Example:

Add a border to a div that is not green or blue.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>not demo</title>
  <style>
  div {
    width: 50px;
    height: 50px;
    margin: 10px;
    float: left;
    background: yellow;
    border: 2px solid white;
  }
  .green {
    background: #8f8;
  }
  .gray {
    background: #ccc;
  }
  #blueone {
    background: #99f;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div></div>
<div id="blueone"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
 
<script>
$( "div" ).not( ".green, #blueone" )
  .css( "border-color", "red" );
</script>
 
</body>
</html>

Demo:

Remove the element with ID "selected" from the collection of all paragraphs.

$( "p" ).not( $( "#selected" )[ 0 ] );

Remove the element with ID "selected" from the collection of all paragraphs.

$( "p" ).not( "#selected" );

Remove all elements matching "div p.selected" from the total set of all paragraphs.

$( "p" ).not( $( "div p.selected" ) );

The above is the detailed content of Detailed explanation of the usage of jQuery.not(selector). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use Jquery+Ajax+xml to create three-level linkage effectsNext article：Use Jquery+Ajax+xml to create three-level linkage effects

See more

Detailed explanation of the usage of jQuery.not(selector)

Related articles