[jquery] 필터링 메서드 .first() .last() .eq() .not()

728x90

목 차

• 1. 제이쿼리 필터링 메서드란?
• 2. first()
  • 2-1. 문법
  • 2-2. 사용 예제
• 3. last()
  • 3-1. 문법
  • 3-2. 사용 예제
• 4. eq(index)
  • 4-1. 문법
  • 4-2. 사용 예제
• 5. not(selector)
  • 5-1. 문법
  • 5-2. 사용 예제
• 6. 종합 예제

반응형

 

1. 제이쿼리 필터링 메서드란?

• jQuery는 DOM 요소를 쉽게 선택하고 조작할 수 있도록 다양한 메서드를 제공합니다. first(), last(), eq(), not()는 선택된 요소 집합 중 일부를 필터링하거나 제외하기 위해 사용되는 유용한 메서드들입니다.

 

---

 

2. first()

• 선택된 요소 집합 중 첫 번째 요소를 반환합니다.

 

2-1. 문법

$(selector).first();

 

 

2-2. 사용 예제

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

$("li").first().css("color", "red");

• 첫 번째 <li> 요소(즉, Item 1)의 텍스트 색상이 빨간색으로 변경됩니다.

 

---

 

3. last()

• 선택된 요소 집합 중 마지막 요소를 반환합니다.

 

3-1. 문법

$(selector).last();

 

 

3-2. 사용 예제

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

$("li").last().css("color", "blue");

• 마지막 <li> 요소(즉, Item 3)의 텍스트 색상이 파란색으로 변경됩니다.

 

---

 

4. eq(index)

• 선택된 요소 집합 중 지정한 인덱스에 해당하는 요소를 반환합니다.
• 인덱스는 0부터 시작하며, 음수를 사용하면 끝에서부터 역순으로 선택할 수 있습니다.

 

4-1. 문법

$(selector).eq(index);

 

 

4-2. 사용 예제

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

$("li").eq(1).css("color", "green");

• 두 번째 <li> 요소(즉, Item 2)의 텍스트 색상이 초록색으로 변경됩니다.

$("li").eq(-1).css("color", "purple"); // 역방향 선택

• 마지막 <li> 요소(즉, Item 3)의 텍스트 색상이 보라색으로 변경됩니다.

 

---

 

5. not(selector)

• 선택된 요소 집합 중 지정한 선택자와 일치하지 않는 요소를 반환합니다.

 

5-1. 문법

$(selector).not(filterSelector);

 

 

5-2. 사용 예제

<ul>
  <li class="exclude">Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

$("li").not(".exclude").css("color", "orange");

• 클래스 exclude를 가진 <li> 요소를 제외한 나머지 <li> 요소들의 텍스트 색상이 주황색으로 변경됩니다.

 

---

 

6. 종합 예제

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box special">Box 3</div>
<div class="box">Box 4</div>

// 첫 번째 박스만 강조
$(".box").first().css("border", "2px solid red");

// 마지막 박스 배경색 변경
$(".box").last().css("background-color", "lightblue");

// 두 번째 박스만 선택
$(".box").eq(1).css("color", "green");

// "special" 클래스를 가진 박스를 제외하고 모두 선택
$(".box").not(".special").css("opacity", "0.5");

 

1. 첫 번째 박스의 테두리가 빨간색으로 표시됩니다.
2. 마지막 박스의 배경색이 연한 파란색으로 변경됩니다.
3. 두 번째 박스의 텍스트 색상이 초록색으로 변경됩니다.
4. special 클래스를 가진 박스를 제외한 나머지 박스들의 투명도가 50%로 변경됩니다.

 

---

 

관련글

• [jquery] 라디오 버튼 체크 여부 확인
• [jquery] 제이쿼리를 사용하여 class로 값 가져오기
• [jquery] 제이쿼리를 사용하여 name으로 값 가져오기