Skip to main content

JQuery 필터

eq​

  • equal(=)의 의미
  • 배열처럼 0번째부터 시작
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
$("li").eq(2).css("color", "red");
//$("li:eq(2)").css("color", "red");

image

not​

  • 부정(제외, 아닐 경우)을 의미
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
$("li").not(":eq(2)").css("color", "red");
//$("li:not(:eq(2))").css("color", "red");

image

lt​

  • less than의 약어(미만, ~ 보다작다)
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
$("li:lt(2)").css("color", "red");

image

gt​

  • great than의 약어(초과, ~ 보다크다)
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
$("li:gt(0)").css("color", "red");

image

even​

  • 짝수번째에 해당하는 요소
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
$("li").even().css("color", "red");
// $("li:even").css("color", "red");
//0번째,2번째가 짝수번째 인덱스이기 때문에 1,3이 빨강

image

odd​

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
$("li").odd().css("color", "red");
// $("li:odd").css("color", "red");
// 1번째 인덱스가 홀수번째 인덱스이기 때문에 2가 빨강

image

first / first-child​

  • 첫번째 요소를 지목
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
$("li").first().css("color", "red");
// $("li:first").css("color", "red");
// $("li:first-child").css("color","red");

image

last / last-child​

  • 마지막 요소를 지목
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
$("li").last().css("color", "red");
// $("li:last").css("color", "red");
// $("li:last-child").css("color","red");

image

nth-child()​

  • 몇번째 순서에 있는 요소를 지목
  • 요소 시작 순서는 1
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
$("li:nth-child(2)").css("color", "red");

image

속성 필터[]​

  • []안에 들어간 속성이 있는 요소들을 지목
<div>
  <p>1</p>
  <p class="this">2</p>
  <p>3</p>
  <button class="this">클릭1</button>
  <button>클릭2</button>
  <button class="this">클릭3</button>
</div>
$("[class]").css("color", "red");

image

contains()​

  • 해당 텍스트가 해당될 경우 요소들을 지목
<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <button>클릭1</button>
  <button>클릭2</button>
  <button>클릭3</button>
</div>
$("div :contains('클릭')").css("color", "red");

image

empty​

  • 해당 요소안에 텍스트 값이 없는 요소들을 지목
<div>
  <p>1</p>
  <p></p>
  <p></p>
  <button>클릭1</button>
  <button>클릭2</button>
  <button></button>
</div>
$("div :empty").text("Hello!");

image

danger

$("div :empty")와 $("div *").empty()는 다르다.

  • $("div :empty"): 요소안의 텍스트가 비어있는지 탐색을 하는 것
  • $("div *").empty(): 요소안의 내용을 전부 비우는 것
<div>
  <p>1</p>
  <p></p>
  <p></p>
  <button>클릭1</button>
  <button>클릭2</button>
  <button></button>
</div>
$("div *").empty().text("Hello!");

image

has​

  • 지목되고 있는 태그의 직계자식 혹은 자손들 중 해당 요소를 최소 하나이상 가지고 있으면 지목
<div>
  <p>1</p>
  <p>2</p>
  <p><em>3</em></p>
  <button>클릭1</button>
  <button>클릭2</button>
  <button>클릭3</button>
</div>
$("div:has('em')").css("background-color", "slateblue");
//$("div").has('em').css("background-color", "slateblue");

image

hidden / visible​

  • hidden: 숨겨진 요소가 있다면 그 요소를 선택
  • visible: 표시되고 있는 요소가 있다면 그 요소를 선택
<div>
  <p style="display: none;">1</p>
  <p>2</p>
  <p>3</p>
  <button style="display: none;">클릭1</button>
  <button>클릭2</button>
  <button>클릭3</button>
</div>
:hidden을 show()했을 경우
$("ul :hidden").show();

image

:visible을 hide()했을 경우
$("ul :visible").hide();

image