코드랩 레퍼런스

.contents() 본문

JQUERY

.contents()

webstoryboy 2017. 6. 6. 11:09

.contents() 메서드는 선택한 요소의 하위 콘텐츠를 선택합니다.

Definition

  • .contents() 메서드는 선택한 요소의 하위 콘텐츠를 선택합니다.

Compare

  • 선택한 요소에서 한 번 더 선택 할 때에는 .filter() 메서드를 사용합니다.
  • 선택한 요소에서 하위 콘텐츠 중 가장 근접한 콘텐츠를 선택할 때에는 .contents() 메서드를 사용합니다.

Syntax

$("selector").contents()

Compatibility

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 안드로이드 아이콘 ios 아이콘 익스플로러6 아이콘 6 익스플로러7 아이콘 7 익스플로러8 아이콘 8 익스플로러9 아이콘 9 익스플로러10 아이콘 10 익스플로러11 아이콘 11 엣지 아이콘
.contents()

Sample1 .contents() 메서드 예제입니다.

탐색(Traversing)

  • .add() 메서드는 선택한 요소에 새로운 요소를 추가하여 선택합니다.
  • .addBack() 메서드는 선택한 요소의 상위 요소도 추가하여 선택합니다.
  • .contents() 메서드는 선택한 요소와 일치하는 콘텐츠요소를 선택합니다.
  • .each() 메서드는 선택한 여러 요소들을 각각 순차적으로 실행합니다.
  • .end() 메서드는 필터링이 일어나기 이전의 요소를 선택합니다.

이것은 p태그 아이디 add입니다.

이것은 p태그 클래스 add입니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리(jQuery)</title>
			<style>
				li.on{padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border:1px dashed #a51a3d;}
				p.on{padding: 4px 4px 2px 10px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
				span.on{padding: 4px 4px 2px 10px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
				strong.on{padding: 4px 4px 2px 10px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
				em.on{padding: 4px 4px 2px 10px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
			</style>
    </head>
    <body>
		<h3>탐색(Traversing)</h3>
		<div class="list">
			<ul>
				<li class="one1"><em>.add()</em> 메서드는 선택한 요소에 새로운 요소를 추가하여 선택합니다.</li>
				<li class="one2"><em>.addBack()</em> 메서드는 선택한 요소의 상위 요소도 추가하여 선택합니다.</li>
				<li class="one3"><em>.contents()</em> 메서드는 선택한 요소와 일치하는 <strong>콘텐츠</strong>요소를 선택합니다.</li>
				<li class="one4"><em>.each()</em> 메서드는 선택한 여러 요소들을 각각 <strong>순차적</strong>으로 실행합니다.</li>
				<li class="one5"><em>.end()</em> 메서드는 <span>필터링</span>이 일어나기 <span>이전의</span> 요소를 선택합니다.</li>
			</ul>
			<p id="add">이것은 p태그 아이디 add입니다.</p>
			<p class="add">이것은 p태그 클래스 add입니다.</p>
		</div>

		<div class="btn">
			<ul>
				<li><input type="radio" name="radio" id="ex1" value="1"><label for="ex1">$(".list li").add("p").addClass("on"); </label></li> 
				<li><input type="radio" name="radio" id="ex2" value="2"><label for="ex2">$(".list li").add("#add").addClass("on");  </label></li>
				<li><input type="radio" name="radio" id="ex3" value="3"><label for="ex3">$(".list li").add(".add").addClass("on");  </label></li>	
				<li><input type="radio" name="radio" id="ex4" value="4"><label for="ex4">$(".list li.one5").find("span").addClass("on"); </label></li>	
				<li><input type="radio" name="radio" id="ex5" value="5"><label for="ex5">$(".list li.one5").find("span").addBack().addClass("on"); </label></li>
				<li><input type="radio" name="radio" id="ex6" value="6"><label for="ex6">$(".list").contents().find("em").addClass("on");	</label></li>	
				<li><input type="radio" name="radio" id="ex7" value="7"><label for="ex7">$(".list").contents().find("strong").addClass("on"); </label></li>	
				<li><input type="radio" name="radio" id="ex8" value="8"><label for="ex8">$(".list").find(".one1").addClass("on").end().find(".one5").addClass("on"); </label></li>
				<li><input type="radio" name="radio" id="ex9" value="9"><label for="ex9">$(".list li").each(function(){$(this).addClass("on");});</label></li>
			</ul>
		</div>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){    
			var btn = $(".btn > ul > li > input");

			btn.click(function(){
				var num = $(this).attr("value");
				$("*").removeClass("on");
				
				if(num == 1){$(".list li").add("p").addClass("on");}
				if(num == 2){$(".list li").add("#add").addClass("on");}
				if(num == 3){$(".list li").add(".add").addClass("on");}
				if(num == 4){$(".list li.one5").find("span").addClass("on");}
				if(num == 5){$(".list li.one5").find("span").addBack().addClass("on");}
				if(num == 6){$(".list").contents().find("em").addClass("on");}
				if(num == 7){$(".list").contents().find("strong").addClass("on");}
				//$(".list").find(".one1").addClass("on").find(".one5").addClass("on");
				if(num == 8){$(".list").find(".one1").addClass("on").end().find(".one5").addClass("on");}
				//$( ".list li" ).addClass( "on" );
				if(num == 9){$(".list li").each(function(){$(this).addClass("on");});}
			});
		}); 
		</script> 
	</body>
</html>

Share

Related Articles more
공유하기 링크

Ad

Comments