ホームページ > 記事 > ウェブフロントエンド > jQuery.not(selector)の使い方を詳しく解説
jQuery.not(selector)の使い方を詳しく解説
- 巴扎黑オリジナル
- 2017-06-22 17:51:572357ブラウズ
.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」の要素をすべての段落のコレクションから削除します。
$( "p" ).not( $( "#selected" )[ 0 ] );
すべての段落のコレクションから ID「selected」を持つ要素を削除します。
$( "p" ).not( "#selected" );
「div p.selected」に一致するすべての要素を、すべての段落の合計セットから削除します。
りー以上がjQuery.not(selector)の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。