jQuery逆引きリファレンス

jQuery逆引きリファレンス

要素セットから特定の子要素を持つ要素だけを取得するには?(has)

2017年8月24日

jQueryオブジェクトで保持している要素セットから、特定の子要素を持つ要素のみを取得できるhasメソッドの基本的な使い方を説明する。

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

 hasメソッドを利用することで、現在の要素セットから、特定の子要素を持つ要素だけを取り出せます。

 具体的な例も見てみましょう。以下は、<p>要素をマウスオーバーすると、配下に<strong>要素を含んだものだけ、段落全体を赤枠で囲む例です。マウスポインターが要素から外れた時には、枠線も外れます*1

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<p>あなたも<strong>WINGSプロジェクトメンバー</strong>として活躍してみませんか。</p>

<p>現在、WINGSプロジェクトでは、一緒にお仕事ができる仲間を<strong>募集中</strong>です。</p>

<p>興味のある方は、WINGSプロジェクト採用担当までご連絡ください。</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(function() {
  $('p').hover(
    // マウスが乗った時の処理
    function() {
      $(this).has('strong').css('border', 'solid 1px Red');
    },
    // マウスが外れた時の処理
    function() {
      $(this).has('strong').css('border', 'none');
    }
  );
});
</script>
</body>
</html>
hasメソッドで特定の子要素を持った

要素にだけスタイル付けする例(has.html)

<strong>要素を含んだ段落だけを枠線で強調
<strong>要素を含んだ段落だけを枠線で強調

 イベントリスナーの中では、$(this)はイベント発生元の要素(<p>要素)を表します。ここでは、hasメソッドで、配下に<strong>要素が存在するかどうかを確認して、存在する場合にだけcssメソッドでスタイルを設定しています。

処理対象:子要素ありで選択 カテゴリ:トラバーシング(選択系の操作)
API:.has() カテゴリ:Traversing(トラバーシング) > Filtering(フィルタリング)

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

75. 現在の要素セットからm~n番目の要素を取得するには?(slice)

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

76. 要素セットからn番目の要素を取得するには?(eq)

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

77. 【現在、表示中】≫ 要素セットから特定の子要素を持つ要素だけを取得するには?(has)

jQueryオブジェクトで保持している要素セットから、特定の子要素を持つ要素のみを取得できるhasメソッドの基本的な使い方を説明する。

78. 要素セットに、指定された条件に合致する要素が含まれるかを判定するには?(is)

isメソッドを使って、指定した条件に合致する要素が、現在の要素セットに1つ以上含まれているかどうかを判定する方法を説明。また、jQuery 1.7前後で発生した挙動の変化についても言及する。

79. 親要素を削除するには?(unwrap)

現在の要素の親に当たる要素を削除するunwrapメソッドの基本的な使い方を説明。これ以外の要素削除系メソッドとの違いも簡単にまとめる。

サイトからのお知らせ

Twitterでつぶやこう!