[jquery] parents, parentsUntil, prevAll, prevUntil, nextAll, nextUntil, closest, has, sliblings 테스트

정리겸 메모.

내가 잘 못 이해할 수 도 있음.

parents,parentsUntil,closest 등 비교.html

<div>

<ul class="level-1 yes">

  <li class="item-i">I</li>

  <li class="item-ii">II

    <ul class="level-2 yes">

      <li class="item-a">A</li>

      <li class="item-b">B

        <ul class="level-3">

  <li class="item-11">1</li>

          <li class="item-1">1</li>

          <li class="item-2">2</li>

          <li class="item-3">3</li>

        </ul>

      </li>

      <li class="item-c">C</li>

    </ul>

  </li>

  <li class="item-iii">III</li>

</ul>

</div>

$(".level-3").parents(".yes").css("border", "5px solid green");

// 셀렉터가 없다면 계속 거슬러 올라가고, 있다면 그 셀렉터들이 나올때까지 거슬러올라간다.

$(".level-3").parentsUntil(".yes").css("border", "1px solid red");

// parentsUntil, prevUntil, nextUntil ... until 들어가는것은 시작, 끝을 제외하고 가운데 element를 return 한다.

// prev 라면 이전 시작 element, until해서 찾는 element 를 제외하고 가운데.

// parentsUtil은 찾는 부모를 제외하고 그 바로전 하위 부모를 찾는다.

$(".level-3").closest(".yes").css("background-color", "blue");

// parents(selector) 인데와 비슷하지만, 가장 가까운 부모 element하나만 return 한다.

// parentsUntil(selector)와 다른점은 closest 는 selector를 포함 하지만, parentsUntil은 selector를 제외하고 그 바로 자식 element를 return 한다.

$(".level-3").has(".item-2").css("background-color", "yellow");

// 대상 element의 하위에 찾는 selector가 있다면 대상 element를 return 한다.

// find, children, filter 는 selector에 의해 찾아진 element를 return 하지만, has 는 첫대상 selector를 return 한다.

// $("selector").find("ul").end() 와 그나마 비슷하다고 할까? ㅡㅡ;

$(".item-2").siblings().css("background-color", "red");

// 대상 element 의 좌우(이전,이후|prev, next) 모두~

$(".item-2").siblings(".item-1").css("background-color", "gray");

// 대상 element 의 좌우(prev, next) 중 해당 selector 만 return.

$(".item-11").nextAll().css("background-color", "black");

// prevAll,nextAll 은 대상 element로 부터 모든 element를 return

$(".item-11").nextAll(".item-1, .item-3").css("background-color", "orange");

// prevAll(selector),nextAll(selector) 는 대상 element로 부터 찾는 selector만 return.