find()/filter()

find() 탐색 선택자는 선택한 하위 요소 중에서 find()로 필터링한 요소만 선택합니다. filter() 탐색 선택자는 선택한 요소 중에서 filter()로 필터링한 요소만 선택합니다.

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

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 03</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 :nth-child").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(".txt2").css("backgroundColor","blue");
            
            //$("#inner_1 p:even").css("backgroundColor","red");

        });
    </script>
</head>
<body>
    <div id="outer_warp">
        <h1>콘텐츠 탐색 선택자</h1>
        <section id="inner_1">
            <h2>find(), finlter</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 4</p>
        </section>
    </div>

</body>
</html>

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

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
</head>
<style>
    @font-face {
    font-family: 'ImcreSoojin';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.3/ImcreSoojin.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
    .section { width: 700px; margin: 50px auto; text-align: center; font-family: 'ImcreSoojin';}
    .section h1 {font-size: 40px;}
    .section p {font-size: 30px;}
    .section p span {padding: 5px; display: inline-block;}
</style>
<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>
    
        //글자 쪼개기
        let text = $(".desc").text().split(" ").join("</span><span>")
        text ="<span>" + text + "</span>";

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

Previous탐색 Next속성

Last updated 4 years ago

Was this helpful?

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery 03</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 :nth-child").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(".txt2").css("backgroundColor","blue"); //$("#inner_1 p:even").css("backgroundColor","red"); }); </script> </head> <body> <div id="outer_warp"> <h1>콘텐츠 탐색 선택자</h1> <section id="inner_1"> <h2>find(), finlter</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 4</p> </section> </div> </body> </html>

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery</title> </head> <style> @font-face { font-family: 'ImcreSoojin'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.3/ImcreSoojin.woff') format('woff'); font-weight: normal; font-style: normal; } .section { width: 700px; margin: 50px auto; text-align: center; font-family: 'ImcreSoojin';} .section h1 {font-size: 40px;} .section p {font-size: 30px;} .section p span {padding: 5px; display: inline-block;} </style> <body> <div class="section"> <h1>친화도법(affinity diagram)</h1> <p class="desc">아이디어를 정리하는 압축 기법이다. 보통 아이디어를 발화하는 방법으로 많이 사용되는 것이 <em>브레인스토밍</em>이다. 그러나 <em>브레인 스트로밍</em> 으로 많은 아이디어나 생각들이 도출되었어도 정돈되지 않아 핵심 파악이 어려울 때가 있다. <strong>친화도법</strong>은 많은 아이디어나 생각을 관련 있는 것 끼리 분류하여 전체적인 구조를 파악하는 문제 해결 방법이다. 동일한 주제에 대한 의견이나 미래에 일어날 상황 등을 예측하여 유사성, 연관성이 높은 순으로 재분류하고 파악한 후 해결안을 만든다.</p> </div>  <script src="jquery.min_1.12.4.js"></script> <script> //글자 쪼개기 let text = $(".desc").text().split(" ").join("</span><span>") text ="<span>" + text + "</span>"; $(".desc").html(text).find("span").hover(function(){ $(this).css({color: "#c7254e", backgroundColor:"#f9f2f4", borderRadius: "5px"}) },function(){ $(this).css({color: "#000000", backgroundColor:"transparent"}) }); </script> </body> </html>