jQuery Academy · 강의

.filter()를 활용한 고급 필터링

.filter() 메서드의 모든 기능을 살펴보고, 함수를 사용해 사용자 정의 로직을 적용하며 동적 속성이나 관계에 따라 요소를 선택합니다.

.filter()를 활용한 고급 필터링은(는) CoddyKit의 무료 jQuery Academy 강의입니다. 이것은 3개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 jQuery Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

.filter()로 선택 결과 다듬기

jQuery의 .filter() 메서드는 이미 선택한 요소 집합의 범위를 좁히는 강력한 방법입니다. 특정 기준에 맞는 요소만 남길 수 있습니다.

처음 선택한 결과에 두 번째 선택 단계를 적용하여 더 정확한 결과를 얻는다고 생각해 보세요.

선택자를 사용한 기본 필터링

.filter()를 사용하는 가장 간단한 방법은 CSS 선택자 문자열을 제공하는 것입니다. 일반 선택자와 같은 방식으로 작동하지만, 현재 jQuery 집합에 이미 포함된 요소에만 적용됩니다.

먼저 클래스 .item이 있는 모든 div를 선택한 다음, 클래스 .active도 가진 요소만 남기도록 필터링해 보겠습니다.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <div class="item">Item 1</div>
  <div class="item active">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item active">Item 4</div>

  <script>
    $(document).ready(function(){
      // Select all divs with class 'item'
      var allItems = $('div.item');
      // Then filter to keep only those with class 'active'
      var activeItems = allItems.filter('.active');
      activeItems.css('color', 'blue');
    });
  </script>
</body>
</html>

함수를 사용한 사용자 지정 논리

.filter()의 진정한 강점은 인수로 함수를 전달할 때 드러납니다. 이렇게 하면 선택 결과의 각 요소에 매우 사용자 지정된 동적 논리를 적용할 수 있습니다.

함수는 현재 jQuery 집합의 각 요소에 대해 실행됩니다.
함수는 두 인수를 받습니다. index는 집합에서 요소의 위치이고, element는 원시 DOM 요소입니다.
요소를 유지하려면 true를 반환하고, 필터링된 집합에서 제거하려면 false를 반환합니다.

인덱스 위치로 필터링하기

필터 함수의 index 인수를 사용하면 현재 jQuery 집합에서 요소의 위치를 기준으로 요소를 선택할 수 있습니다. 두 번째 요소마다 선택하거나 특정 범위를 선택하는 작업에 유용합니다.

모든 인덱스가 짝수인 목록 항목, 즉 0부터 시작해 두 번째 항목마다 선택하고 강조 표시해 보겠습니다.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Index</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li>Item 0</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>

  <script>
    $(document).ready(function(){
      $('li').filter(function(index) {
        // Keep items at even indices (0, 2, 4...)
        return index % 2 === 0;
      }).css('background-color', 'lightgreen');
    });
  </script>
</body>
</html>

속성과 프로퍼티를 기준으로

element 인수 또는 함수 내부의 $(this)를 사용하면 각 DOM 요소의 프로퍼티, 속성 또는 텍스트 내용을 확인할 수 있습니다. 이를 통해 매우 구체적인 필터링이 가능합니다.

여기서는 텍스트에 "Important"라는 단어가 포함된 모든 목록 항목을 찾아 굵게 표시하겠습니다.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Property</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li>Task 1</li>
    <li>Important Task 2</li>
    <li>Task 3</li>
    <li>Another Important Task 4</li>
  </ul>

  <script>
    $(document).ready(function(){
      $('li').filter(function() {
        // Check if the text content includes "Important"
        return $(this).text().includes('Important');
      }).css('font-weight', 'bold');
    });
  </script>
</body>
</html>

데이터를 사용한 동적 필터링

HTML5 data 속성(예: data-status="active")은 요소에 애플리케이션별 추가 정보를 직접 저장하는 데 적합합니다. .filter()를 사용하여 이러한 사용자 지정 데이터 값을 기준으로 요소를 선택할 수 있습니다.

data-status 속성을 사용하여 'complete'로 표시된 목록 항목을 강조 표시해 보겠습니다.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Data</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li data-status="pending">Task A</li>
    <li data-status="complete">Task B</li>
    <li data-status="pending">Task C</li>
    <li data-status="complete">Task D</li>
  </ul>

  <script>
    $(document).ready(function(){
      $('li').filter(function() {
        // Check the 'data-status' attribute
        return $(this).data('status') === 'complete';
      }).css('text-decoration', 'line-through');
    });
  </script>
</body>
</html>

자식 또는 부모를 기준으로 필터링하기

필터 함수는 요소 간의 관계도 확인할 수 있습니다. 예를 들어 특정 자식을 포함하는 부모 요소를 선택하거나 그 반대의 작업을 할 수 있습니다.

여기서는 내부에 <img> 태그를 포함하는 목록 항목을 찾아 테두리를 추가하겠습니다.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Relationship</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li>Text only</li>
    <li>Item with <img src="https://placehold.co/16x16" alt="icon"></li>
    <li>Another text item</li>
    <li>Item with another <img src="https://placehold.co/16x16" alt="image"></li>
  </ul>

  <script>
    $(document).ready(function(){
      $('li').filter(function() {
        // Check if the current <li> contains an <img>
        return $(this).find('img').length > 0;
      }).css('border', '2px solid orange');
    });
  </script>
</body>
</html>

논리를 사용한 복합 필터

필터 함수 내부에서 && (AND) 및 || (OR)와 같은 표준 JavaScript 논리 연산자를 사용하여 여러 조건을 결합할 수 있습니다.

이를 통해 한 번에 여러 기준을 적용하여 매우 정확하게 선택할 수 있으므로 필터링 기능이 훨씬 강력해집니다.

표시되어 있나요? AND 특정 클래스가 있나요?
'X'라는 텍스트를 포함하나요? OR 'Y'라는 데이터 속성이 있나요?

실제 상황에서의 동적 필터링

지금까지 배운 내용을 함께 적용해 보겠습니다. 여러 기준에 따라 제품 목록을 필터링한다고 가정해 보세요. 필터 함수는 여러 조건을 동적으로 확인할 수 있습니다.

이 예제에서는 필터 함수 내부에서 논리를 결합하여 표시되어 있고 AND 'electronics' 카테고리에 속하는 제품을 강조 표시합니다.

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Filtering</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .hidden { display: none; }
</style>
</head>
<body>
  <div class="product" data-category="electronics">Laptop</div>
  <div class="product hidden" data-category="books">Novel</div>
  <div class="product" data-category="electronics">Mouse</div>
  <div class="product" data-category="books">Textbook</div>

  <script>
    $(document).ready(function(){
      $('div.product').filter(function() {
        // Filter products that are visible AND in 'electronics' category
        var isVisible = $(this).is(':visible');
        var isElectronics = $(this).data('category') === 'electronics';
        return isVisible && isElectronics;
      }).css('background-color', 'lightblue');
    });
  </script>
</body>
</html>

필터 도전

<li class="item special" data-value="10">...</li> HTML이 주어졌을 때, 클래스 .special AND 5보다 큰 data-value를 가진 li 요소만 올바르게 선택하는 .filter() 함수는 무엇인가요?

복습: 동적 필터링의 강력함

이제 jQuery의 .filter() 메서드를 고급 방식으로 사용하는 방법을 익혔습니다!

기존 선택 결과를 다듬어 정밀하게 제어할 수 있습니다.
함수를 사용하면 동적이고 복잡한 필터링 논리를 활용할 수 있습니다.
인덱스, 요소의 프로퍼티, 데이터 속성 및 요소 간 관계를 확인할 수 있습니다.
&& (AND) 및 || (OR)를 사용하여 여러 조건을 결합하고 매우 구체적인 기준을 적용할 수 있습니다.

이 강력한 메서드를 사용하면 반응성이 뛰어나고 데이터를 기반으로 동작하는 사용자 인터페이스를 만들 수 있습니다.

자주 묻는 질문

“.filter()를 활용한 고급 필터링” 강의는 무료인가요?

네 — “.filter()를 활용한 고급 필터링” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 jQuery Academy 강의 전체를 잠금 해제할 수 있습니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

“.filter()를 활용한 고급 필터링”에서 뭘 배우나요?

.filter() 메서드의 모든 기능을 살펴보고, 함수를 사용해 사용자 정의 로직을 적용하며 동적 속성이나 관계에 따라 요소를 선택합니다. 브라우저에서 직접 실행하는 실습 코드로 jQuery Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

jQuery Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 jQuery Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 2번째 강의입니다.

“.filter()를 활용한 고급 필터링” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 jQuery Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 jQuery Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← jQuery Academy(으)로 돌아가기