hasとは
- ここで説明するhas とは次の語句からなるjQueryのメソッドです。
- has
- 読み: ハズ
意味: have の3人称単数現在形、持っている、所有している
hasメソッドの概要
このメソッドは、呼び出し元の親要素が包含している子要素らが、メソッドの引数セレクターに一致する場合に、 その親要素らを集合させた配列風のjQueryオブジェクトを返します。
つまり、子要素が has(セレクター) のセレクターの部分にマッチしていれば、その親要素を返すといったニュアンスになります。
構文
サンプルを見る前に構文を確認しておきます。
var ##init[] = $(parentSelector).has(childSelector);サンプルコードと実行結果
このサンプルは、class属性の値に "clsYes" という値をもっている子要素を持つ親要素(div)を取得して、 その要素の背景色をライトブルーに設定するといった内容です。
サンプルコード: CSS
<style>
div{
border: thin solid lightgray;
margin: 1em;
padding: 1em;
}
</style>
サンプルコード: HTML
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div>< span class ="clsNo">span element< /span></div>
<div>< span class ="clsYes">span element< /span></div>
<div><output class ="clsNo">output element</output></div>
<div><output class ="clsYes">output element</output></div>
</body>
- 05: div span (この子要素、 span には、class属性の値に "clsNo" が設定されています。)
- 06: div span (この子要素、 span には、class属性の値に "clsYes" が設定されています。)
- 07: div output (この子要素、 output には、class属性の値に "clsNo" が設定されています。)
- 08: div output (この子要素、 output には、class属性の値に "clsYes" が設定されています。)
サンプルコード: script
<script>
$("div").has(".clsYes").each(function(){
$(this).css({"background-color" : "##lightblue"});
});
</script>
- 02: $("div") (このセレクターは、親要素のdivを表しています。)
- 02: has(".clsYes") (このセレクターは、子要素の class="clsYes" の属性値をもつ要素を表しています。)
- 02-04: each(function(){some processing}) (取得した親要素に対して1回ずつ関数を実行します。)
- 03: $(this) (thisは、この場合「class属性の値が"clsYes"の子要素を包含しているdiv要素」のことを指しています。)
- 03: css() (cssメソッドはスタイルを適用します。)
span element
span element