Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

要素セットから指定の条件に合致したものを取り除くには?(not)

2017年7月13日

jQueryオブジェクトで保持している要素セットから、指定条件に合致しない要素のみを取得できるnotメソッドの基本的な使い方を説明する。

  • このエントリーをはてなブックマークに追加

 要素セット(jQueryオブジェクトで保持している要素群)から、指定の条件に合致した要素を取り除くには、notメソッドを利用します。いわゆる、別稿「TIPS:要素セットを指定の条件で絞り込むには?」でも触れたfilterメソッドの否定です。

 具体的な例も見てみましょう。以下は、全ての<div>要素に対して枠線を設定した後、class="inactive"である<div>要素以外にだけ水色の背景色を適用した例です。

HTML
<!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>
特定条件に合致した要素だけを現在の要素セットから除去するコード(not.html)
「class=inactive」でない要素にだけ背景色を付与
「class="inactive"」でない要素にだけ背景色を付与
処理対象:否定条件で選択 カテゴリ:トラバーシング(選択系の操作)
API:.not() カテゴリ:Traversing(トラバーシング) > Filtering(フィルタリング)|Traversing(トラバーシング) > Miscellaneous Traversing(その他のトラバーシング機能)

※以下では、本稿の前後を合わせて5回分(第72回~第76回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
72. 現在の要素から指定された祖先/兄弟要素までを取得するには?(prevUntil/nextUntil/parentsUntil)

prevUntil/nextUntil/parentsUntilメソッドを使って、jQueryオブジェクトで保持している現在の要素セットから、現在の要素の直後から、ツリー構造において(指定された)兄/弟/親の関係にある要素の直前までの範囲にある全要素を取得する方法を説明する。

jQuery逆引きリファレンス
73. 要素セットの内容を順に処理するには?(map)

jQueryオブジェクトで保持している要素セットを、1つずつ順番に処理し、その処理結果をjQueryオブジェクトとして取得できるmapメソッドの基本的な使い方を説明する。

jQuery逆引きリファレンス
74. 【現在、表示中】≫ 要素セットから指定の条件に合致したものを取り除くには?(not)

jQueryオブジェクトで保持している要素セットから、指定条件に合致しない要素のみを取得できるnotメソッドの基本的な使い方を説明する。

jQuery逆引きリファレンス
75. 現在の要素セットからm~n番目の要素を取得するには?(slice)

jQueryオブジェクトで保持している要素セットから、指定したm~n番目の要素のみを取得できるsliceメソッドの基本的な使い方を説明する。

jQuery逆引きリファレンス
76. 要素セットからn番目の要素を取得するには?(eq)

jQueryオブジェクトで保持している要素セットから、指定したインデックス番号の要素のみを取得できるeqメソッドの基本的な使い方を説明する。

サイトからのお知らせ

Twitterでつぶやこう!