parent(), find(), siblings()

FrontEnd/JQuery

by H_Develop 2022. 7. 12. 18:47

요소 탐색
DOM 트리에서 현재 요소를 기준으로 특정 요소를 찾는 다양한 메써드를 제공한다.

parent() 현재 요소의 부모 요소를 찾아서 그 요소의 CSS를 조작
find() 현재 요소를 기준으로 하위에 있는 특정 요소를 찾아서 CSS를 조작
siblings() 선택된 요소의 형제 요소들을 찾아서 CSS를 조작

parent() $("span").parent()

    <script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
    <script>
    	$(document).ready(function() {
        	$("span").parent().css("border","solid 2px green");
            $("li").parent().css("border","solid 2px blue");
            $("ul").parent().css("border","dotted 2px red");
        });
    </script>
    <style>
    	ul {border : solid 1px blue;}
    </style>
</head>
<body>
	<h2>parent() 메써드</h2>
    <div>
    	<ul>
        	<li>항목 1</li>
            <li><span>항목 2</span></li>
        </ul>
    	<ul>
        	<li>품목 1</li>
            <li>품목 2</li>
        </ul>
    </div>
</body>

span의 parent()인 두번째 li에 green 보더를 넣어주고,
li의 parent()인 ul에 blue,
ul의 부모인 div에 dotted red를 준다.

find() $("div").find("ul")

    <script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
    <script>
    	$(document).ready(function() {
        	$("div").find("ul").css("background-color","yellow");
            $("div").find("li").css("border","solid 2px red");
            $("div").find("span").css("background-color","skyblue");
        });
    </script>
    <style>
    	ul {border : solid 1px blue;}
    </style>
</head>
<body>
	<h2>find() 메써드</h2>
    <div>
    	<ul>
        	<li>항목1</li>
            <li><span>항목2</span></li>
        </ul>
    	<ul>
        	<li>품목1</li>
            <li>품목2</li>
        </ul>
    </div>
</body>

div안에 find("ul")을 찾고, find("li"), find("span")을 찾는다. 그리고 찾은 테그에 css를 적용시킨다.

siblings() $("h3").siblings()

    <script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
    <script>
    	$(function() {
        	$("h3").siblings().css("background-color","pink");
        });
    </script>
</head>
<body>
	<h2>sibling() 메써드</h2>
    <p>타인</p>
    <div>
    	<p>형제 1 p</p>
        <span>형제 2 span</span>
        <h4>형제 3 h4</h4>
        <p>형제 4 p</p>
    </div>
</body>

div안의 h3를 제외한 모든 테그가 적용된다

'FrontEnd > JQuery' 카테고리의 다른 글

JQuery ( on() ) (0)	2022.07.13
마우스이벤트(click(),dbclick(),mouseenter(),mouseleave())키보드이벤트(keypress(),keydown(),keyup())폼이벤트(focus(),blur(),change())문서윈도우이벤트(ready(),resize(),scroll()) (0)	2022.07.13
JQuery Selector ( 기본 선택자, 필터 선택자, 전체 선택자 ) (0)	2022.07.12
JQuery ( addClass(), removeClass(), css() ) (0)	2022.07.12
JQuery Method( append(), prepend(), befor(), after(), remove() ) (0)	2022.07.11