More than 1 year has passed since last update.

【jQuery】特定のセレクタが付いた親要素を持つ子要素（または子要素を持つ親要素）の指定

Posted at 2022-09-10

特定のセレクタが付いた親要素を持つ子要素を指定したい場合

セレクタとは、スタイルを適用する箇所(条件式)のこと。
idとかクラスとか、タグとか。

↓こんなパターンのときに使える。

▼"hoge-wrap"というクラスが付いた親要素の子要素に、クラスを追加したいときの記述
html

<ul class="hoge-wrap">
  <li class="hoge"></li>
</ul>

function $hoge() {
  $(".hoge-wrap").children().addClass("hogehoge");
}

＜注意点＞
addClassとかremoveClassメソッドのように、メソッド名に"Class"というワードが入っていたら、""内に入力するクラス名の先頭には".（ドット）"は付けない。

＜応用編＞
▼"hoge-wrap"というクラスが付いた親要素の子要素に、スタイルを追加したいときの記述

$(".hoge-wrap").children().css("background", "lightgreen");

▼"hoge-wrap"というクラスが付いた親要素の子要素から、特定のクラスを削除したいときの記述

$(".hoge-wrap").children().removeClass("background", "lightgreen");

他にも色々応用できそう〜！
children以外にも、特定のセレクタが付いた要素の子要素を指定するメソッドはいっぱいあった。

▼"hoge"というクラスが付いた子要素の親要素の

タグに、クラスを追加したいときの記述
html

<ul class="hoge-wrap">
  <li><span class="hoge">1</span></li>
</ul>

function $hoge() {
    $("li:has(.hoge)").addClass("hogehoge");
  }

＜応用編＞
▼"hoge"というクラスが付いた子要素の、"hoge-wrap"というクラスが付いた親要素内の子要素<li>タグだけに、スタイルを追加したいときの記述

$(".hoge-wrap li:has(.hoge)").addClass("hogehoge");