THE HAM MEDIA BLOG

jQuer基礎:深い階層のタグを指定する方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
javascript
DOM

深い階層のタグを指定する方法

jQueryをもう一度基礎的なことから学ぼうかな、
なんて考えていたので、勉強がてらエントリー。

idとかclassを指定していなくても、
特定の階層のタグを指定すべきときがある。
そんな場合の方法をご紹介。



深い階層(何重もの入れ子)のタグを指定する方法

階層を$("div > p")で指定すると、
divに囲まれたpに適応となる。
この■ > ●という構造はさらに深く指定できて、
■ > ● > ▲という風に、「>」でどんどん階層を深くしていける。

このことをふまえて、サンプルを作った。

Preview

one

two

three

JavsScript

$(document).ready(function(){
    $("div > div > div > div > div > div > div > p")
    .css("border", "1px solid gray");
    $("div > div > div > div > div > div > p > span")
    .css("color", "#ff0000");
});

もともとこのブログは多くのdivに囲まれているのですが、
それを考慮にいれても、もともと階層が深い。
今回は7つのdivに囲まれているpにはボーダーを、
6つのdivに囲まれているpに囲まれたspanを赤文字に、
それぞれしてみました。

Previewで言えば、twoがボーダー、
threeが赤色文字になるようにしています。

HTML

<div><div><div><div><div><div>
<p>one</p> <div><p>two</p></div> <p>three</p>
</div></div></div></div></div></div>

ここのブログの階層の深さがわかると思うのですがdivがもともと多い。
階層が深くなっても、jQueryで指定するときは、
階層分の「>」をつけて指定をすれば適応できる。
もっとも、idやclassなどで指定した方が作るのも楽なんですけどね。

参考サイト:


この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。