jQuery filter() Method

description : jQuery filter() Method
author : 오션
email : shlim@repia.com
lastupdate : 2022-10-24 Mon

The source of this article

Definition and Usage

filter() 메소드는 특정 기준과 일치하는 요소를 반환합니다.
이 메소드를 사용하여 기준을 지정할 수 있습니다. 기준에 부합하지 않는 요소는 선택에서 제거되고, 일치하는 요소들이 반환됩니다.
이 메소드는 선택한 요소 그룹에서 요소 검색 범위를 좁히는데 종종 사용됩니다.
Tip : filter() 메소드는 not() 메소드의 정반대입니다.

Syntax

$(selector).filter(criteria, function(index));

Example

(1) 짝수 번 째의 모든 <p> 요소를 반환

  <body>
    <p>My name is Donald (index 0).</p>
    <p>I live in Duckburg (index 1).</p>
    <p>My best friend is Mickey (index 2).</p>
    <p>My name is Daisy (index 3).</p>
    <p>I live in Duckburg (index 4).</p>
    <p>My best friend is Minnie (index 5).</p>
 
    <script>
      $(document).ready(function () {
        $("p").filter(":even").css("background-color", "yellow");
        // p tag중에서 인텍스를 기준으로 짝수번째의 모든 p tag에 배경색 yellow를 적용
        // 인텍스는 0부터 시작
      });
    </script>

    <p style="background-color: yellow;">My name is Donald (index 0).</p>
    <p>I live in Duckburg (index 1).</p>
    <p style="background-color: yellow;">My best friend is Mickey (index 2).</p>
    <p>My name is Daisy (index 3).</p>
    <p style="background-color: yellow;">I live in Duckburg (index 4).</p>
    <p>My best friend is Minnie (index 5).</p>

(2) 다중 기준(Multiple Criteria)

  <body>
    <h1>Welcome to My Homepage</h1>
 
    <p>My name is Donald.</p>
    <p class="intro">I live in Duckburg.</p>
    <p>I love Duckburg</p>
    <p id="outro">My best friend is Mickey</p>
 
    <script>
      $(document).ready(function () {
        $("p").filter(".intro, #outro").css("background-color", "red");
      });
    </script>
  </body>

    <p>My name is Donald.</p>
    <p class="intro" style="background-color: red;">I live in Duckburg.</p>
    <p>I love Duckburg</p>
    <p id="outro" style="background-color: red;">My best friend is Mickey</p>

(3) jQuery 오브젝트를 사용하여,

요소 내부의 'intro' 클래스를 가진 모든 <p>태그를 반환

  <body>
    <div style="border: 1px solid black">
      <h1>Welcome to My Homepage</h1>
      <p>My name is Donald.</p>
      <p class="intro">I live in Duckburg (will be selected).</p>
      <p>My best friend is Mickey.</p>
    </div>
 
    <p class="intro">This p element is outside the div element.</p>
    <p>This p element is also outside the div element.</p>
 
    <script>
      $('p').filter($('div p.intro')).css("background-color", "gold");
    </script>
  </body>

    <div style="border: 1px solid black">
      <h1>Welcome to My Homepage</h1>
      <p>My name is Donald.</p>
      <p class="intro" style="background-color: gold;">I live in Duckburg (will be selected).</p>
      <p>My best friend is Mickey.</p>
    </div>
 
    <p class="intro">This p element is outside the div element.</p>
    <p>This p element is also outside the div element.</p>

(4) DOM 요소를 사용하여 id가 'intro'를 가진 p 요소를 반환하는 방법

  <body>
    <h1>Welcome to My Homepage</h1>
 
    <p>My name is Donald.</p>
    <p id="intro">I live in Duckburg.</p>
    <p>My best friend is Mickey.</p>
 
    <script>
      $("p")
        .filter(document.getElementById("intro"))
        .css("background-color", "lightblue");
    </script>
  </body>

    <p>My name is Donald.</p>
    <p id="intro" style="background-color: lightblue;">I live in Duckburg.</p>
    <p>My best friend is Mickey.</p>

(5) DOM 요소를 사용하여 id가 'intro'를 가진 p 요소를 반환하는 방법

  <body>
    <div>
      <p>A p element <span>with one span element.</span></p>
      <p>A p element <span>with</span> two <span>span elements.</span></p>
      <p>A p element <span>with one span element.</span></p>
      <p>A p element <span>with</span> two <span>span elements.</span></p>
      <p>A p element with no span element.</p>
    </div>
 
    <p>
      This example returns all p elements that have two span elements. P
      elements with none, one, or more than two span elements, will not be
      returned.
    </p>
 
    <script>
      $(document).ready(function () {
        $("p")
          .filter(function () {
            return $("span", this).length == 2;
          })
          .css("background-color", "violet");
      });
    </script>
  </body>

      <p>A p element <span>with one span element.</span></p>
      <p style="background-color: violet;">A p element <span>with</span> two <span>span elements.</span></p>
      <p>A p element <span>with one span element.</span></p>
      <p style="background-color: violet;">A p element <span>with</span> two <span>span elements.</span></p>
      <p>A p element with no span element.</p>

Internal Ref Link

jQuery :even Selector

오션, jQuery, filter(), Method

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

목차

jQuery filter() Method

The source of this article

Definition and Usage

Syntax

Example

Internal Ref Link

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

목차

jQuery filter() Method

The source of this article

Definition and Usage

Syntax

Example

Internal Ref Link

문서 도구