マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

javascript(jquery)

【jQuery】 $(this)の親要素、子要素、隣接要素を指定する

投稿日:2014年8月22日 更新日:

jQueryでイベントが発生した要素を指定する$(this)。
jQueryを初めて使った頃は$(this)ってなんだ!?
なんで普通に<li>なら$(“li”)じゃだめなの~!?
なんて思いましたが大きな違いですよね。
そして次につまづいたのが、$(this)の親要素、子要素、隣接要素やらは一体どうやって指定するのだろ~~~でした。

<div>
  <ul>
    <li class=”menu01″><span class=”sp01″>メニュー01</span></li>
    <li class=”menu02″><span class=”sp02″>メニュー02</span></li>
    <li class=”menu03″><span class=”sp03″>メニュー03</span></li>
  </ul>
</div>

$(this)の親要素、先祖要素を指定する

$(“li”).click(function(){
  $(this).parent() //①
  $(this).parent(“ul”) //②
});

①すぐ上の親要素を指定(それより上は指定できません)
②先祖要素を指定(parent()より上にさかのぼることができます)
上記のソースの場合、②ならdivを指定できますが、①ではulのみです。

$(this)の子要素、子孫要素を指定する

$(“li”).click(function(){
  $(this).children(“span”) //①
  $(this).find(“span”) //②
  $(“span”,this) //③
});

①子要素を指定(孫要素以下は指定できません)
②③子孫要素を指定(孫要素以下も指定できます)

$(this)の隣接要素を指定する

$(“li”).click(function(){
  //次
  $(this).next(“li”) //①
  $(“+li”,this) //②
  $(this).nextAll(“li”) //③
  //前
  $(this).prev(“li”) //④
  $(this).prevAll(“li”) //⑤
});

()内は.menu01をクリックした場合に指定される要素
①②すぐ次にある要素を指定(.menu02)
③次以降にある全ての要素を指定(.menu02、.menu03)

()内は.menu03をクリックした場合に指定される要素
④すぐ前にある要素を指定(.menu02)
⑤前にある全ての要素を指定(.menu02、.menu01)

-javascript(jquery)

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【jQuery】 超簡単!アコーディオンメニュー ②

【jQuery】 超簡単!アコーディオンメニュー ②

【jQuery】 超簡単!アコーディオンメニュー ① こちらでとっても簡単なアコーディオンを作成しましたが、これでは自分のデザインに活用できなかった・・・ そんな時はhtml5の新属性、独自データ属性 …

PCサイトとスマートフォンサイトを振り分けるjQueryライブラリ<Pc2Sp.js>をHTML4で利用する方法。

PCサイトとスマートフォンサイトを切り替えたい場合、 「Pc2Sp.js」というjQueryライブラリを利用すると実装できます。 このライブラリの紹介はネット上でたくさん見つかると 思いますので、今回 …

javascriptの便利なライブラリについて

javascriptの便利なライブラリについて

オブジェクト(配列)や文字列の処理は自作の作成した場合、時間を要してしまします。 そこで、これらの処理をおこなう際に便利なJavascriptライブラリを紹介します。 1. underscore.js …

レスポンシブにも対応!行ごとのブロック要素の高さを自動で合わせる方法。

レスポンシブにも対応!行ごとのブロック要素の高さを自動で合わせる方法。

ブロック要素の高さを揃えるJavaScriptはいくつかあります。 その中でも行ごとの高さを変えたい場合に便利な「fixHeight.js」をご紹介します。 「fixHeight.js」の設置方法 ま …

面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作成!

面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作成!

以前ご紹介しました面白い動きや便利な機能をJSで実装! その1:簡単にグラフを作成する方法!の応用編になります。 前回は折れ線グラフをご紹介致しましたが、今回は「棒グラフ」「レーダーチャート」「円グラ …