THE HAM MEDIA BLOG

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

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

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

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

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

Preview

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に囲まれているのですが、
それを考慮にいれても、もともと階層が深い。
今回は７つのdivに囲まれているpにはボーダーを、
６つの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などで指定した方が作るのも楽なんですけどね。