マーカーネット株式会社

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

html・CSSでのマークアップは何となく分かるけどjQueryはちょっと分からないという方、 今からjQueryを使ってみようと思っている方必見。 今回は便利なjQueryプラグイン「imgLiqu …

超簡単!【CSS3】ロールオーバー効果

超簡単!【jQuery】ロールオーバー効果 こちらではjqueryで簡単にロールオーバーをかける方法をご紹介しました。実はCSS3でも全く同じ効果を再現できるので、今回はCSS3でロールオーバー効果を …

面白い動きや便利な機能をJSで実装! その4:ちょっと変わったマウスオーバーを実装してみました。

面白い動きや便利な機能をJSで実装! その4:ちょっと変わったマウスオーバーを実装してみました。

【今までにご紹介したJSの一覧】 面白い動きや便利な機能をJSで実装! その3:一目で印象に残るアニメーション背景を作成! 面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作 …

jqueryを利用した、facebookのアルバムから写真一覧の取得について

jqueryを利用した、facebookのアルバムから写真一覧の取得について

jQueryを利用して、 facebookの指定のアルバムから写真の一覧を取得する方法を紹介します。 ※ まず、facebookからアルバム一覧します。 var name = “markernet”; …