マーカーネット株式会社

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プラグイン「imgLiquid」

親要素の大きさに合わせて画像をリサイズできるjQueryプラグイン「imgLiquid」 http://www.markernet.co.jp/blog/2015/07/10/post-5790/ F …

jQueryでタブを作ってみた

今回はjQueryでタブを作ってみました。 タブは皆さんご存知の通りよくあるタブです! Webサイトのページ内でコンテンツ要素が大量にある場合 そのまま表示させるとページが縦長になり ブラウザ上で縦ス …

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

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

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

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

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

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

WYSIWYGエディタCKEditor + KCFinderで画像の保存先を動的に指定する方法。

WYSIWYGエディタCKEditor + KCFinderで画像の保存先を動的に指定する方法。

ブログの記事の編集などにWYSIWYGエディタCKEditor + KCFinderを導入しているサイトでログインするユーザごとに画像のアップロード先を切り替えたい状況がございます。 その方法を紹介し …