개발노트 :: 제이쿼리(Jquery) 필터링 선택자#4

제이쿼리(Jquery) 필터링 선택자#4

제이쿼리에 요소를 선택 후 선택한 요소를 필터링하기 위해 제이쿼리에서 제공하고 있는 메서드를 사용해 요소를 다시 선택하는 방법에 대해서 알아보겠습니다.

 

 

1. 제이쿼리(Jquery) 필터링 함수 표

선택자	예시	설명
.first()	$("#selector").first()	선택된 요소 중에서 첫 번째 요소 선택
.last()	$("#selector").last()	선택된 요소 중에서 마지막 요소 선택
.eq()	$("#selector").eq(index)	선택된 요소 중에서 index에 해당하는 요소 선택
.filter()	$("#selector").filter( [selector] )	선택된 요소 중에서 해당 요소가 있으면 해당 요소를 선택
.not()	$("#selector").not( [selector] )	선택된 요소 중에서 해당 요소가 있으면 해당 요소를 제외한 나머지 요소 선택
.has()	$("#selector").has( [selector] )	선택된 요소 중에서 해당 요소가 자식으로 되어 있으면 해당 요소 선택
.is()	$("#selector").is( [selector] )	선택된 요소 중에서 해당 요소가 있으면 true 값을 반환
.slice()	$("#selector").slice(index,index)	선택된 요소 중에서 index 범위에 해당하는 요소 선택

 

 

1.1 제이쿼리(Jquery) 필터링 사용 예시

1.1.1 .first() .last() 함수 사용

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li>
	</ul>
</div> 
<script type="text/javascript">
	$("li").first().css("color","red");
	$("li").last().css("color","red");
</script>

결과값

1 2 3 4 5 6

선택된 li 전체 태그들 중에서 처음과 마지막에 해당하는 1, 6인 요소가 선택됩니다.  

 

 

1.1.2 .eq() 함수 사용

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li>
	</ul>
</div> 
<script type="text/javascript">
	$("li").eq(2).css("color","red");
</script>

결과값

1 2 3 4 5 6

선택된 li 전체 태그들 중에서 index가 2번인 3번째 li 요소가 선택이 됩니다.

index 번호는 0번 부터 시작이 된다.

 

 

1.1.3 .filter() 함수 사용

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li>
	</ul>
</div> 
<script type="text/javascript">
	$("li").filter(":odd").css("color","red");
</script> 

결과값

1 2 3 4 5 6

선택된 li 전체 요소 중에서 filter에 해당하는 짝수 요소들만 선택이 됩니다.

 

 

1.1.4 .not() 함수 사용

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li>
	</ul>
</div> 
<script type="text/javascript">
	$("li").not(":odd").css("color","red");
</script>

결과값

1 2 3 4 5 6

선택된 li 전체 요소 중에서 not에 해당하는 짝수가 아닌 홀수 요소들을 선택이 됩니다.

 

 

1.1.5 .has() 함수 사용

<div>
	<ul>
		<li><span>1</span></li>
		<li><span>2</span></li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li>
	</ul>
</div> 
<script type="text/javascript">
	$("li").has("span").css("color","red");
</script>

결과값

1 2 3 4 5 6

선택된 li 전체 요소 중에서  has에 해당하는 자식요소가 span를 갖는 li 태그만 선택이 됩니다.

 

 

1.1.6 .is() 함수 사용

<div>
	<ul>
		<li id="selector">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li> 
	</ul>
</div> 
<script type="text/javascript">
	var flag = $("li").is("#selector");
	if(flag){
		$("#selector").css('color','red');
	}
</script>

결과값

1 2 3 4 5 6

선택된 li 전체 요소 중에서 id가 selector 값이 있으면 true 값을 반환하는 기능입니다.

 

 

1.1.7 .slice() 함수 사용

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li> 
	</ul>
</div> 
<script type="text/javascript">
	$("li").slice(1,2).css('color','red');
</script> 

결과값

1 2 3 4 5 6

선택된 li 전체 요소 중에서 slice에 해당하는 인덱스가 1부터 2이전 인덱스에 해당 하는 요소를 선택합니다.

.slice(startIndex, endIndex) index는 0부터 시작 startIndex(포함) 부터 endIndex(미포함) 이전까지 해당하는 요소

.slice(startIndex) startIndex(포함) 부터 마지막 요소(포함)까지 해당하는 요소 선택