マーカーネット株式会社

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

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

関連記事

Movable Type6がリリースされました

Movable Type6がリリースされました

movable type6 以下の新機能が追加されたとのことです。 – Data API APIを通じてMovable Typeの管理画面の操作や記事の読み込みが可能になったとのことです。 – Cha …

jQueryを使ってみよう【親要素の大きさに合わせて画像をリサイズできるjQueryプラグイン「imgLiquid」】

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

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

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

レスポンシブにも対応!② グローバルナビゲーションを作成してみました。

この間はレスポンシブでも使える行ごとのブロック要素の高さを自動で合わせるJavaScriptをご紹介致しました。 レスポンシブにも対応!行ごとのブロック要素の高さを自動で合わせる方法。 レスポンシブで …

レスポンシブにも対応!③ フリックスライダーを作成してみました。

レスポンシブにも対応!③ フリックスライダーを作成してみました。

今回はレスポンシブに対応できるスライドショーを作成してみたいと思います。 ただ、レスポンシブに対応しているだけでなく、 スマホに便利なフリックも可能なものをご紹介致します。 前回までの関連記事です。 …