jQuery 遍历 - is() メソッド

jQuery 遍历参考手册

例

false を返します、なぜなら input 要素の親要素は p 要素だからです：

  var isFormParent = $("input[type='checkbox']").parent();.is("form");
  $("div").text("isFormParent = " + isFormParent);

実際に試してみてください

定義と使用法

is() は選択子、要素、または jQuery オブジェクトに基づいて一致する要素集合を検出し、これらの要素の少なくとも1つが指定されたパラメータに一致する場合、true を返します。

文法

.is(selector)
パラメータ 説明
selector 文字列値、一致する要素の選択子表現を含む。

詳細な説明

他のフィルタリングメソッドとは異なり、.is() は新しい jQuery オブジェクトを作成しません。代わりに、jQuery オブジェクトの内容を変更せずに検出を行うことができます。これは、コールバック内部で特に役立ちます、例えばイベントハンドラの場合。

例えば、リストの中に子要素を持つ2つの項目があると仮定します：

<ul>
  <li>list <strong>item 1</strong></li>
  <li><span>list item 2</span></li>
  <li>list item 3</li>
</ul>

リストアイテム自体がクリックされた場合のみ、クリックイベントハンドラを <ul> 要素に追加し、コードを実行するようにしてください：

$("ul").click(function(event) {
  var $target = $(event.target);
  if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }
);

実際に試してみてください

現在、ユーザーがクリックしたのは最初のリストアイテムの単語「list」または第3のリストアイテムのどの単語でも、クリックされたリストアイテムは赤い背景に設定されます。しかし、ユーザーが最初のリストアイテムの「item 1」または第2のリストアイテムのどの単語でもクリックした場合、何も変わらないのは、その場合のイベントのターゲットが <strong> は <span> だからです。

位置性選択子を持つ選択子表現文字列、例えば :first、:gt()、または :evenなどに対して、位置性フィルタは .is() に渡される jQuery オブジェクトに対して、ドキュメントに対して行われます。したがって、上記の HTML に対して、$("li:first").is("li:last")のような表現は true を返しますが、$("li:first-child").is("li:last-child")は false を返します。

関数を使用して

このメソッドの第二种の使用法は、関数ではなく選択子に基づく関連要素の表現を評価することです。各要素に対して、その関数が true を返した場合、.is() も true を返します。以下は、少し複雑な HTML 片断の例です：

<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong> -
    two <span>strong tags</span></li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

各 <li> に click ハンドラを追加して、クリックされた <li> 内の <strong> 要素の数を計算することができます：

$("li").click(function() {
  var $li = $(this),
    isWithTwo = $li.is(function() {
      return $('strong', this).length === 2;
    });;
  if ( isWithTwo ) {
    $li.css("background-color", "green");
  } else {
    $li.css("background-color", "red");
  }
);

実際に試してみてください

jQuery 遍历参考手册