マーカーネット株式会社

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

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

関連記事

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

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

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

HTML5 【data-】 独自データ属性を使おう!

独自データ属性、カスタムデータ属性、data-role属性・・・ と色々な呼ばれ方をする、html5で追加されたオリジナルの属性をつくれる素敵な仕組み! 「href」はリンク先、「id」「class」 …

ブロック要素の高さを揃えるのに便利なjqueryライブラリ【jquery.tile.js】

ブロック要素の高さを揃えるのに便利なjqueryライブラリ【jquery.tile.js】

ブロック要素にfloatをかけて回り込ませる、 というのはコーディングをする際によく使う手法ですよね。 「ブロック要素の高さを揃えたい」と思う事はありませんか? そんな時、私がよく使う便利なjquer …

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

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

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

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

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