jQuery逆引きリファレンス
要素セットから指定の条件に合致したものを取り除くには?(not)
jQueryオブジェクトで保持している要素セットから、指定条件に合致しない要素のみを取得できるnotメソッドの基本的な使い方を説明する。
要素セット(jQuery
オブジェクトで保持している要素群)から、指定の条件に合致した要素を取り除くには、not
メソッドを利用します。いわゆる、別稿「TIPS:要素セットを指定の条件で絞り込むには?」でも触れたfilter
メソッドの否定です。
具体的な例も見てみましょう。以下は、全ての<div>
要素に対して枠線を設定した後、class="inactive"
である<div>
要素以外にだけ水色の背景色を適用した例です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
<style>
.box {
height:30px;
width:30px;
float:left;
margin-left:20px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box inactive"></div>
<div class="box"></div>
<div class="box"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(function() {
$('div').css('border', '1px solid #f00') // 枠線を設定
.not('.inactive') // class="inactive"である要素を除外
.css('background-color', '#0ff'); // 背景色を設定
});
</script>
</body>
</html>
|
API:.not() カテゴリ:Traversing(トラバーシング) > Filtering(フィルタリング)|Traversing(トラバーシング) > Miscellaneous Traversing(その他のトラバーシング機能)
※以下では、本稿の前後を合わせて5回分(第72回~第76回)のみ表示しています。
連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。
72. 現在の要素から指定された祖先/兄弟要素までを取得するには?(prevUntil/nextUntil/parentsUntil)
prevUntil/nextUntil/parentsUntilメソッドを使って、jQueryオブジェクトで保持している現在の要素セットから、現在の要素の直後から、ツリー構造において(指定された)兄/弟/親の関係にある要素の直前までの範囲にある全要素を取得する方法を説明する。
73. 要素セットの内容を順に処理するには?(map)
jQueryオブジェクトで保持している要素セットを、1つずつ順番に処理し、その処理結果をjQueryオブジェクトとして取得できるmapメソッドの基本的な使い方を説明する。
74. 【現在、表示中】≫ 要素セットから指定の条件に合致したものを取り除くには?(not)
jQueryオブジェクトで保持している要素セットから、指定条件に合致しない要素のみを取得できるnotメソッドの基本的な使い方を説明する。
75. 現在の要素セットからm~n番目の要素を取得するには?(slice)
jQueryオブジェクトで保持している要素セットから、指定したm~n番目の要素のみを取得できるsliceメソッドの基本的な使い方を説明する。
76. 要素セットからn番目の要素を取得するには?(eq)
jQueryオブジェクトで保持している要素セットから、指定したインデックス番号の要素のみを取得できるeqメソッドの基本的な使い方を説明する。