jQuery.not(selector)の使い方を詳しく解説-jsチュートリアル-php.cn

jQuery.not(selector)の使い方を詳しく解説

巴扎黑

リリース： 2017-06-22 17:51:57

オリジナル

2424 人が閲覧しました

.not(selector) 戻り値: jQuery

説明: 一致する要素のセットから要素を削除します。

追加されたバージョン: 1.0.not (セレクター)

選択

タイプ: セレクター、要素、または配列

このセットに一致するセレクター式、DOM 要素、または要素の配列を含む文字列。

バージョンの増加: 1.4。 (関数)

関数

型: 関数 (整数インデックス、要素要素) => boolean

コレクション内の各要素のテストとして使用される関数。これは 2 つのパラメーターを受け入れます。index は、DOM 要素である jQuery コレクション要素内の要素のインデックスです。この関数内では、これは現在の DOM 要素を指します。

追加されたバージョン: 1.4 未選択 (選択済み)

選択済み

タイプ: jQuery

現在の要素グループと一致する既存の jQuery オブジェクト。

DOM 要素のセットを表す jQuery オブジェクトが与えられた場合、not()、このメソッドは一致する要素のサブセットから新しい jQuery オブジェクトを構築します。提供されたセレクターは各要素に対してテストされ、セレクターに一致しない要素は結果に含まれます。

単純なリストを含むページを考えてみましょう:

five

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

ログイン後にコピー

このメソッドをリスト項目のセットに適用できます:

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

ログイン後にコピー

この呼び出しの結果、項目 2 と 4 の背景は赤になります。セレクターと一致します (偶数:奇数の場合は 0 のインデックスが使用されることを思い出してください)。

特定の要素を削除する

.not() メソッドの 2 番目のバージョンでは、以前に他のメソッドでこれらの要素を見つけたと仮定して、一致するセットから要素を削除できます。たとえば、リストの項目の 1 つに ID が適用されているとします:

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

ログイン後にコピー

ネイティブ JavaScript getElementById() 関数を使用して 3 番目のリスト項目を取得し、それを jQuery オブジェクトから削除できます:

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

ログイン後にコピー

Thisステートメント項目 1、2、4、5 の色を変更しました。より単純な jQuery 式を使用しても同じことを実現できますが、この手法は、たとえば他のライブラリが純粋な DOM ノードへの参照を提供する場合に役立ちます。

jQuery 1.4 以降、.not() メソッドは .filter() と同じ方法で関数をパラメーターとして受け取ることができます。関数 true によって返される要素は、フィルター処理されたコレクションから除外されます。その他の要素はすべて含まれます。

注: CSS selectorstring が .not() に渡されると、テキストおよびコメントノードはフィルタリング中に結果の jQuery オブジェクトから常に削除されます。特定のノードまたはノードの配列を指定する場合、テキストまたはコメントノードは、フィルタリングされた配列内のノードの 1 つと一致する場合にのみ jQuery オブジェクトから削除されます。

例:

緑でも青でもない div に境界線を追加します。

<!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>

ログイン後にコピー

デモ:

IDが「selected」の要素をすべての段落のコレクションから削除します。