# find() / filter()

> $("선택자").find("하위 요소 중 필터링할 요소 선택")\
> $("선택자").filter("선택한 요소 중 필터링할 요소 선택")

```markup
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="jquery.min_1.12.4.js"></script>
    <script>
        $(function(){
            //내용1을 선택해서 백그라운드를 빨간색으로 변경
            //$(".txt1").css("backgroundColor","red");
            //$("p:contains('내용1')").css("backgroundColor","red");
            // $("#inner_1 p:eq(0)").css("backgroundColor","red");
            // $("#inner_1 p:first").css("backgroundColor","red");
            // $("p[class='txt1']").css("backgroundColor","red");
            // $("p[class^='txt1']").css("backgroundColor","red");
            // $("p[class*='txt1']").css("backgroundColor","red");
            // $("p[class~='txt1']").css("backgroundColor","red");
            // $("#inner_1 :nth-child(2)").css("backgroundColor","red");
            // $("#inner_1 p:nth-of-type(1)").css("backgroundColor","red");
            // $("#inner_1 p:first-of-type").css("backgroundColor","red");
            // $("#inner_1 .txt1").css("backgroundColor","red");
            // $("#inner_1 p:lt(1)").css("backgroundColor","red");
            $("#inner_1").find(".txt1").css("backgroundColor","red");
            $("#inner_1 p").filter(".txt1").css("backgroundColor","red");
        });
    </script>
</head>
<body>

    <div id="outer_wrap">
        <h1>콘텐츠 탐색 선택자</h1>
        <section id="inner_1">
            <h2>find(), filter()</h2>
            <p class="txt1">내용1</p>
            <p class="txt2">내용2</p>
        </section>
        <section id="inner_2">
            <h2>filter(function)</h2>
            <p>index 0</p>
            <p>index 1</p>
            <p>index 2</p>
            <p>index 3</p>
        </section>
    </div>
    <!-- script -->
    
    <script>
       
    </script>
</body>
</html>
```

### 마우스 오버하면 글씨 변경하기

{% embed url="<https://limboram.github.io/dothome1/jquery/jquery04_find.html>" %}

```markup
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <style>
        @font-face {
            font-family: 'Bazzi';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/Bazzi.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }
        .section {width: 700px; margin: 50px auto; text-align: center; font-family: 'Bazzi';}
        .section h1 {font-size: 50px;}
        .section p {font-size: 30px;}
        .section p span {display: inline-block; padding: 5px;}
    </style>
</head>
<body>

    <div class="section">
        <h1>친화도법(affinity diagram)</h1>
        <p class="desc">아이디어를 정리하는 압축 기법이다. 보통 아이디어를 발화하는 방법으로 많이 사용되는 것이 <em>브레인스토밍</em>이다. 그러나 <em>브레인스토밍</em>으로 많은 아이디어나 생각들이 도출되었어도 정돈되지 않아 핵심 파악이 어려울 때가 있다. <strong>친화도법</strong>은 많은 아이디어나 생각을 관련 있는 것끼리 분류하여 전체적인 구조를 파악하는 문제 해결 방법이다. 동일한 주제에 대한 의견이나 미래에 일어날 상황 등을 예측하여 유사성, 연관성이 높은 순으로 재분류하고 파악한 후 해결안을 만든다.</p>
    </div>
    <!-- script -->
    <script src="jquery.min_1.12.4.js"></script>
    <script>
        // $(".desc strong").css({color: "#c7254e", backgroundColor: "#f9f2f4", fontSize: "90%", padding: "4px 6px 2px 6px", borderRadius: "5px"});

        // $(".desc").find("em").css({color: "#c7254e", backgroundColor: "#f9f2f4", fontSize: "90%", padding: "4px 6px 2px 6px", borderRadius: "5px"});

        // $(".desc").find("strong").mouseover(function(){
        //     $(this).css({color: "#c7254e", backgroundColor: "#f9f2f4", fontSize: "90%", padding: "4px 6px 2px 6px", borderRadius: "5px"});
        // });
        // $(".desc").find("strong").mouseout(function(){
        //     $(this).css({color: "#000", backgroundColor: "transparent", fontSize: "100%", padding: "0px", borderRadius: "0px"});
        // });

        // $(".desc").find(":contains('친화도법')").css({color: "#c7254e", backgroundColor: "#f9f2f4", fontSize: "90%", padding: "4px 6px 2px 6px", borderRadius: "5px"});

        //글자 쪼개기
        let text = $(".desc").text().split(" ").join("</span><span>");
        text = "<span>" + text + "</span>";
        
        // $(".desc").html(text).find("span").mouseover(function(){
        //     $(this).css({color: "#C7254E", backgroundColor: "#F9F2F4", fontSize: "90%", padding: "4px 6px 2px 6px", borderRadius: "5px"});
        // });

        $(".desc").html(text).find("span").hover(function(){
            $(this).css({color: "#C7254E", backgroundColor: "#F9F2F4", borderRadius: "5px"});
        },function(){
            $(this).css({color: "#000000"});
        });
    </script>
</body>
</html>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://qhfka8773.gitbook.io/jquery/undefined-3/find.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
