본문 바로가기

개발/jQuery

jQuery (제이쿼리) - jQuery 비교연산자 셀렉터 eq, lt, gt, not

이전 포스팅 중 제이쿼리 객체 배열에서 해당 인덱스에 해당하는 객체를 리턴 받는 방법으로

제이쿼리에서 제공하는 함수인 eq() 와 get() 에 대해서 작성한 적이 있었다.


그리고 이번 포스팅은 비교연산자를 통해서 객체를 리턴 받는 방법을 소개 할텐데

사실 제목만 보고도 사용방법이 딱 감이 오는 분들도 있을 것이다. 그만큼이나 쉽다.

  • 1 li
  • 2 li
  • 3 li
  • 4 li
  • 5 li
  • 6 li
  • 7 li
$(document).ready(function() { $("li:lt(3)").css("background-color", "red"); $("li:eq(3)").css("background-color", "yellow"); $("li:gt(3)").css("background-color", "green"); });

위의 소스를 실행시키면 1,2,3번의 배경색은 빨갛게 되고 4번의 배경색은 노란색 

그리고 나머지 5,6,7번의 배경색은 초록색으로 변하게 된다.


다른 함수들이 그렇듯이 lt, eq, gt 함수들도 인덱스는 0번부터 시작하므로 헷갈리지 않도록 주의하자.


그리고 이건 여담이지만 lt 는 Less than, eq 는 Equal, gt 는 Greater than 의 약자라고 한다. ...라고 나는 알고 있었는데 

어느 블로그에서는 lt 가 Little 이라고 한다?;;; 난 lt 를 Little 이라고 부르는 사람을 본 적이 없는데;;;;;


그래서 여러 검색어를 사용해서 검색해봤는데 그 어디에서도 lt 를 Little 이라고 하는 곳은 없었다....

혹시라도 잘 아시는 스피드웨건은 댓글로 알려줘요.


그리고 이건 또 여담이지만 < 표시가 있다고 해서 Less than 의 상황만 오는 건 아니라서 난 그냥 lt 는 Left 라고 외우고 있다.

왼쪽으로 꺾쇠가 나와 있으니까. -_- 그럼 자연스럽게 gt 는 따로 외우지 않아도 > 겠지.


하여튼 lt, eq, gt 에 대한 설명은 위의 소스코드로 충분히 설명이 가능한 것 같고 이번에는 not 함수에 대해 공부해보자.

not 함수는 인덱스를 사용하는 lt, eq, gt 와 다르게 파라미터로 셀렉터를 받는다.

  • 1 li
  • 2 li
  • 3 li
  • 4 li
  • 5 li
  • 6 li
  • 7 li
$(document).ready(function() { $("li:lt(3)").css("background-color", "red"); $("li:eq(3)").css("background-color", "yellow"); $("li:gt(3)").css("background-color", "green"); $("li:not(.lineUp)").css("font-size", "25px"); });

위 코드는 lineUp 클래스를 가지고 있지 않은 li 엘리먼트들의 글씨 크기를 25px 로 변경하는 스크립트이다.

한 번씩 실행해보면 감이 올거라 생각한다. 끝!