トラバース

new_gist_file

要素については先祖、親子、兄弟という階層が存在します。
1
<div>
2
    <ul>
3
        <li>兄</li>
4
        <li>この要素から見て....ul要素は親、div要素は先祖</li>
5
        <li>弟</li>
6
    </u/>
7
    ul要素からみるとli要素は子、div要素は親ということになります。
8
</div>

以下説明に子要素や兄要素等の言葉がでてきますが、簡単に説明すると上記のような感じなのでイメージできれば簡単です。


$(“#id1″).find(“.class7″)
ID名 id1 の要素の中にあるCLASS名 class7 の要素を選択

$(“ul”).children(“.class6″)
ulタグ の子要素にある CLASS名 class6 の要素を選択

$(“li.class6″).parent()
CLASS名 class6 があるliタグを持つ親要素を選択

$(“li.class6″).parent(“#id1″)
CLASS名 class6 があるliタグを持つ親要素でID名 id1 の要素を選択

$(“li.class6″).next()
CLASS名 class6 があるliタグに隣接する弟要素を選択

$(“li.class6″).next(“.class7″)
CLASS名 class6 があるliタグに隣接する弟要素の中でCLASS名 class7 の要素であれば選択
(それ以外であれば選択しない)

$(“li.class7″).prev()
CLASS名 class7 があるliタグに隣接する兄要素を選択

$(“li.class7″).next(“.class6″)
CLASS名 class7 があるliタグに隣接する兄要素の中でCLASS名 class6 の要素であれば選択
(それ以外であれば選択しない)

$(“a[href ^= '#link']“).closest(“li”)
aタグのhref属性の値が「#link」から始まる要素の最も近いliタグ(親要素)を選択

$(“li”).slice(“3,12″)
すべてのliタグをあわせた0から数えて3個目から12個目までの間の要素を選択

$(“li”).find(“a”).css({color: ‘white’}).end()
liタグ内にあるaタグにスタイルを追加した後、直前の要素を選択

$(“li”).not(“li.class6″)
すべてのliタグでCLASS名 class6 が指定されていない要素を選択

$(“a[href *= 'middle']“).first()
aタグのhref属性の値に「middle」が含まれている一番最初にある要素を選択

$(“a[href *= 'middle']“).last()
aタグのhref属性の値に「middle」が含まれている一番最後にある要素を選択

$(“p”).siblings()
pタグの兄弟要素を選択

$(“p”).siblings(“p”)
pタグの兄弟要素の中でpタグの要素を選択