07.28(traversing 예제)

traversing(요소 탐색) 예제

<div class="wrap">
    div (parent)
    <p>p</p>
    <span>span</span>
    <h1>h1</h1>
    <h2 id="me">h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <p>p</p>
</div>

<script>
let $me = $("#me");
let style = {
    color: "orange",
    border: "2px solid orange"
}
// $me.siblings().css(style);  //css는 이전요소 선택이 불가능하지만 제이쿼리는 가능
// $me.next().css(style);
// $me.nextAll().css(style);
// $me.nextUntil("p").css(style);
// $me.prev().css(style);
// $me.prevAll().css(style);
// $me.prevUntil("span").css(style);
</script>

<div class="typetest">
    div.test
    <ul>
        ul1
        <li>li1-1</li>
        <li>
            li1-2
            <ul>
                ul2
                <li>li2-1</li>
                <li>li2-2</li>
                <li>
                    li2-3
                    <ul>
                        ul3
                        <li>
                            li3
                            <span id="fromMe">fromMe</span>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
<script>
//.wrap으로부터 li2-2, li2-3을 찾고, 스타일 변경
let $wrap = $(".wrap");
$wrap.eq(0).find("div:eq(2)").find("ul:eq(1)").find("li:eq(0)").nextAll().css(style);

// $wrap.find("ul:eq(2)").children("li:not(:first)").css(style);

</script>