jQuery｢.has()｣で指定の子要素を持つ親要素を選択

2020年5月21日

jQueryのメソッド「.has()」は、指定の子要素を持つ要素を選択するメソッド

今回は、jQueryで「指定の子要素をもつ要素を選択する」メソッド「.has()」について、その使い方をサンプルを交えて解説しよう。

.has()の機能とは？

.has()の機能

.has()は、「指定の子要素を持つ親要素を選択する」事ができるメソッド。
※全く同じ機能の:has()というセレクタもあるが、書き方が少し違うので、書式を混同しないように気をつけよう。

.has()の構文

「指定の子要素を持つ親要素を選択する」構文

$("セレクタ").has(セレクタ);

.has()の使い所

.has()は指定の子要素をもつ「親要素」を選択するという点が使い所のポイント。つまり同じ要素であっても、特定の子要素をもつ場合と持たない場合がある要素が使い所である。

例えば次のようなナビゲーションで「<li>の子要素」にaタグを持つ場合とaタグを持たない場合で処理を分けたい場合などに有効だ。

HTML

<button>ボタン</button>
<ul class="nav">
 <li><span>pageA</span></li>
 <li><a href="page-b.html">pageB</a></li>
 <li><a href="page-c.html"">pageC</a></li>
</ul>

jQuery

$(function(){
  $("button").on("click",function(){
     $(".nav li").has("a").css("list-style-image","url('arrow.gif')");
  });
});

この場合「aタグを子要素にもつli」はリストのスタイルで「矢印マーク」が付くようになる。

※ちなみに、同じ内容を:has()セレクタを使って書くと次のようになる。

$(".nav li:has(a)").css("list-style-image","url('arrow.gif')");

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント