본문 바로가기

Webstoryboy

Category

Explanation

JQUERY

[jQuery] 기타

기타

탐색과 관련된 기타 메서드입니다.


기타(Miscellaneous Traversing)

메서드 설명
.add() 선택한 요소에 새로운 요소를 추가합니다.
.addBack() 선택한 요소의 상위 요소도 같이 선택합니다.
.contents() 선택한 요소와 일치하는 콘텐츠 요소를 선택합니다.
.each() 선택한 여러 요소들을 각각 순차적으로 실행합니다.
.end() 선택한 요소의 필터링이 일어나기 이전의 요소를 선택합니다.
Sample : 기타
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리(jQuery)</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script type="text/javascript">
			$(document).ready(function(){
				//$(".list li").text("목록");
				
				$(".list li").each(function(i, a){
					$(a).text("목록"+i);		//매개 변수에는 요소의 인덱스가 저장되고 a에는 요소가 저장됩니다.
				});
			});
        </script>
    </head>
    <body>
		<h3>기본 태그를 선택하는 방법</h3>
		<div class="list">
			<ul>
				<li class="one1">one1</li>
				<li class="one2">one2</li>
				<li class="one3">one3</li>
				<li class="one4">one4</li>
				<li class="one5">one5</li>
				<li class="one6">one6</li>				
				<li class="one7">one7</li>
				<li class="one8">one8</li>
				<li class="one9">one9</li>
				<li id="one10">one10
					<ul>
						<li>one10-1<img src="../css.png" alt="이미지"></li>
						<li>one10-2<img src="../html5.png"></li>
						<li>one10-1</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>   

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기