jQuery Academy · レッスン

.not()による要素の除外

.not()メソッドを使いこなし、一致した集合から特定の要素を正確に除外して選択を絞り込み、意図しない要素への操作を防ぎます。

「.not()による要素の除外」はCoddyKit上の無料jQuery Academyレッスンです。これはレッスン3/3です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはjQuery Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 jQuery Academyコースには全3レッスンが含まれています。

.not()の概要

ようこそ。このレッスンでは、jQueryの強力な.not()メソッドを使いこなします。要素の選択結果を絞り込むために欠かせないメソッドです。

.not()メソッドを使うと、一致した要素の集合から特定の要素を除外できます。これにより、操作対象にする要素を正確に制御できます。

セレクター文字列による除外

.not()の最も一般的な使い方は、CSSセレクター文字列を渡すことです。jQueryは、現在の選択結果のうち、新しいセレクターに一致する要素を削除します。

まず広い範囲を選択します。
次に.not()を使って不要な要素を除外します。

「すべて」を選択してから「削除するもの」を指定したほうが簡単な場合に便利です。

.not()とクラスセレクター

次の例を試してみましょう。すべてのdiv要素を選択し、.not()を使ってクラス.specialを持つ要素を除外します。スタイルが適用されるのは、specialではないdivだけです。

<!DOCTYPE html>
<html>
<head>
<style>
  .red { color: red; }
</style>
</head>
<body>
  <div class="box">Item 1</div>
  <div class="box special">Item 2</div>
  <div class="box">Item 3</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // Select all .box divs, then exclude the one with .special
      $('.box').not('.special').addClass('red');
    });
  </script>
</body>
</html>

特定の要素を除外する

セレクター文字列だけでなく、DOM要素やjQueryオブジェクトを.not()に直接渡すこともできます。

現在の選択結果から除外したい正確な要素（または要素群）への参照をすでに持っている場合に便利です。

.not()と要素参照

この例では、すべてのリスト項目（<li>）を選択します。次に、ID（#item2）で特定の項目を識別し、.not()を使ってスタイル適用の対象から除外します。

<!DOCTYPE html>
<html>
<head>
<style>
  .bold { font-weight: bold; }
</style>
</head>
<body>
  <ul>
    <li>List Item 1</li>
    <li id="item2">List Item 2</li>
    <li>List Item 3</li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // Select all <li>, then exclude the specific #item2
      $('li').not($('#item2')).addClass('bold');
    });
  </script>
</body>
</html>

関数によるカスタム除外

非常に動的または複雑な除外ロジックが必要な場合は、.not()に関数を渡せます。

関数は、現在の集合に含まれる各要素に対して実行されます。
関数がtrueを返すと、その要素は除外されます。
thisは処理中の現在のDOM要素を参照します。

.not()と関数の例

ここでは、「exclude」という単語を含む段落を除き、すべての段落にスタイルを適用します。関数で各段落のテキスト内容を確認します。

<!DOCTYPE html>
<html>
<head>
<style>
  .italic { font-style: italic; }
</style>
</head>
<body>
  <p>This is a normal paragraph.</p>
  <p>This paragraph contains 'exclude'.</p>
  <p>Another normal paragraph here.</p>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $('p').not(function() {
        // Exclude paragraphs containing 'exclude'
        return $(this).text().includes('exclude');
      }).addClass('italic');
    });
  </script>
</body>
</html>

.not()を連結して正確に選択する

複数の.not()呼び出しを連結したり、.not()を他の絞り込みメソッドと組み合わせたりすることで、非常に正確な選択結果を作成できます。

各.not()呼び出しによって現在の要素集合がさらに絞り込まれ、不要な要素が順に削除されます。必要のない要素の層を少しずつ剥がしていくように考えるとよいでしょう。

.not()を使う場面

.not()は、次のような場面で非常に役立ちます。

最初に広い範囲を選択し、特定の種類をいくつか除外したい場合。
すでに直接参照を持っている要素を除外したい場合。
「これら以外すべて」と表現したほうが、コードが明確で読みやすくなる場合。

最初から複雑な否定セレクターを書くことなく、対象を洗練させられる便利な方法です。

簡単な確認: .not()の使用

次のHTMLを考えてみましょう。ID"intro"を持つもの以外のすべての<p>要素を正しく選択するjQueryコードスニペットはどれですか。

<div>
  <p>Paragraph 1</p>
  <p id="intro">Introduction</p>
  <p>Paragraph 3</p>
</div>

復習: .not()を使いこなす

これで、jQueryの.not()メソッドを使いこなせるようになりました。

.not()は、次の方法で要素を除外して選択結果を絞り込むために重要です。

CSSセレクター文字列（例: .not('.hide')）
特定のDOM要素またはjQueryオブジェクト（例: .not(myElement)）
カスタムで動的な除外ロジックを指定する関数

練習を続けて、jQueryの選択をより正確かつ効率的に行えるようになりましょう。

よくある質問

「.not()による要素の除外」レッスンは無料ですか？

はい。「.not()による要素の除外」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、jQuery Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 jQuery Academyコースには全3レッスンが含まれています。

「.not()による要素の除外」で何を学びますか？

.not()メソッドを使いこなし、一致した集合から特定の要素を正確に除外して選択を絞り込み、意図しない要素への操作を防ぎます。ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

jQuery Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのjQuery Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/3です。

「.not()による要素の除外」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このjQuery Academyレッスンでコードを書いて実行できますか？

はい。すべてのjQuery Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← jQuery Academyに戻る