카테고리 없음

탐색선택자(find, filter)

Remi 2021. 7. 25. 16:56
728x90
반응형
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="JS/jquery.js"></script>
    <script>

        $(function(){
            $("#inner_1").find(".txt1")
            .css({
                "background-color":"#ff0"
            });

            $("#inner_1 p").filter(".txt2")
            .css({
                "background-color":"#0ff"
            }); 

            $("#inner_2 p").filter(function(idx,obj){
                console.log(idx);
                return idx %2==0;
            })
            .css({
                "background-color":"#0f0"
            });
        });
    </script>

<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>index1</p>
            <p>index2</p>
            <p>index3</p>
            <p>index4</p>



        </section>
    </div>
</body>

</html>

728x90
반응형