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_find</title>

    <script src="jquery.min_1.12.4.js"></script>
    <script>
        $(function(){
            //내용1을 선택해서 백그라운드를 빨간색으로 변경
            // $(".txt1").css("background", "#f00");
            // $("#inner_1 p:first").css("background", "#f00");
            // $("p:contains('내용1')").css("background", "#f00");
            // $("#inner_1 p:eq(0)").css("background", "#f00");
            // $("p[class='txt1']").css("background", "#f00");
            // $("p[class^='txt1']").css("background", "#f00");
            // $("p[class*='txt1']").css("background", "#f00");
            // $("p[class~='txt1']").css("background", "#f00");
            // $("#inner_1 p:nth-child(2)").css("background", "#f00");
            // $("#inner_1 p:nth-of-type(1)").css("background", "#f00");
            // $("#inner_1 p:first-of-type").css("background", "#f00");
            // $("#inner_1 .txt1").css("background", "#f00");
            // $("#inner_1 p:lt(1)").css("background", "#f00");
            $("#inner_1").find(".txt1").css("background", "#f00");
            $("#inner_1 p").filter(".txt2").css("background", "#00f");
        });
    </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>

</body>
</html>

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

https://hyunseo418.github.io/dothome/jquery/jquery04_find2.htmlhyunseo418.github.io

<!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: 'MapoFlowerIsland';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MapoFlowerIslandA.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }
        .section {
            width: 700px; margin: 50px auto;
            text-align: center;
            font-family: 'MapoFlowerIsland';
            
        }
        .section h1 {font-size: 40px;}
        .section p {font-size: 30px;}
        .section p span {padding: 5px; display: inline-block;}
    </style>
</head>
<body>
    <div class="section">
    <h1>친화도법(affinity diagram)</h1>
    <p class="desc"><strong>친화도법</strong>은 많은 아이디어나 생각을 관련 있는 것끼리 분류하여 전체적인 구조를 파악하는 문제 해결 방법이다.</p>
    </div>
    
    <!-- script -->
    <script src="jquery.min_1.12.4.js"></script>
    <script>
        //find
        $(".desc").find("strong").css({color: "#c7254e", backgroundColor: "#f9f2f4", fontSize: "90%", padding: "4px 6px 2px 6px", borderRadius: "5px"})
        
        $(".desc").find(":contains('친화도법')").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"});
        });
        
        //글자 쪼개기
        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"});
        });
        
        //mouseover와 mouseout 한번에 쓰기
        $(".desc").html(text).find("span").hover(function(){
            $(this).css({color: "#C7254E", backgroundColor: "#F9F2F4", borderRadius: "5px"});
        }, 
        function(){
            $(this).css({color: "#000", backgroundColor: "transparent"});
        })
    </script>
</body>
</html>

Previous탐색 Nexteach()/$.each()

Last updated 5 years ago

hashtag원하는 내용 찾아서 스타일 바꾸기

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

원하는 내용 찾아서 스타일 바꾸기

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