[jQuery] 필터 4

필터 4번째 강좌 입니다.

이번에는 아래와 같은 필터를 추가해 보겠습니다.

<script type="text/javascript">
    $("document").ready(function() {
        $("#example").children().css("border", "3px solid red");
        var element = $("#para1");
        element.prev().css("border", "3px solid red");
        element.css("border", "3px solid yellow");
        element.next().css("border", "3px solid blue");
        element.parents().css("border", "3px solid purple");
        element.parentsUntil($("body")).css("border", "3px solid green");
        $("#example").find("#para4").css("border", "3px solid red");

        // 두번째 each 펑
        var leftmargin = 0;
        var border =3;
        $("example p").each(function(index, element) {
           $(element).css("border", border+"px solid red")
               .css("margin-left", leftmargin);
           border += 2;
           leftmargin += 10;
            })
    });
</script>

각각을 설명해 보면

$("document").ready(function() {
    $("#example").children().css("border", "3px solid red");

//아이디 example의 하위 DOM에 CSS적용

    var element = $("#para1");

//아이디 para1를 element라 정합니다.

    element.prev().css("border", "3px solid red");

//emement와 같은레벨 즉, 위쪽 p에 css를 적용합니다.

    element.css("border", "3px solid yellow");
    element.next().css("border", "3px solid blue");

//emement와 같은레벨의 아래쪽 p에 css를 적용합니다.

    element.parents().css("border", "3px solid purple");
    element.parentsUntil($("body")).css("border", "3px solid green");

//emement와 최상위 레벨 '보라색' 적용. 다음줄은 상위 body까지 적용

    $("#example").find("#para4").css("border", "3px solid red");

//emement 내에 para4를 찾아 빨간 테둘이css를 적용합니다.
적용 결과는 아래 그림과 같습니다

    // 두번째 each 펑션
    var leftmargin = 0;
    var border =3;
    $("example p").each(function(index, element) {
       $(element).css("border", border+"px solid red")
           .css("margin-left", leftmargin);
       border += 2;
       leftmargin += 10;
        })

두번째 each는 다른 언어의 foreach와 비슷합니다.

1줄. 왼쪽마진 변수를 정하고

2줄. 보더를 3으로 정합니다.

3줄. example 의 p에 each펑션을 넣습니다. 

4줄. element의  css의 보더는 3이 되겠죠

5줄. 왼쪽 마진을 넣습니다.

6줄. 보더에 2를 추가하고

7줄. 왼쪽 마진에 10을 추가합니다.

each 내용을 p가 나올때마다 증가시킵니다.

결과 화면은 아래와 같습니다.