코드랩 레퍼런스

.filter() 본문

JQUERY

.filter()

webstoryboy 2017. 6. 5. 12:57

.filter() 메서드는 선택된 요소에서 한 번 더 필터링하여 요소를 선택합니다.

Definition

  • .filter() 메서드는 선택된 요소에서 한 번 더 필터링하여 요소를 선택합니다.

Syntax

$(selector).filter(selector);
$(selector).filter(function(index));

Compatibility

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

Sample1 filter를 이용해 li를 선택하는 예제입니다.

필터링(Filtering)

  • .eq() 메서드는 선택한 요소의 인덱스 번호를 갖는 요소를 반환합니다.
  • .filter() 메서드는 선택된 요소에서 한 번 더 필터링하여 요소를 선택합니다.
  • .first() 메서드는 선택한 요소의 첫 번째 요소를 반환합니다.
  • .has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
  • .is() 메서드는 선택한 요소의 상태가 지정한 속성과 일치하면 true를 반환합니다.
  • .last() 메서드는 선택한 요소의 마지막 요소를 반환합니다.
  • .map() 메서드는 배열의 데이터를 변환시켜 새로운 배열 객체를 만듭니다.
  • .not() 메서드는 선택한 요소 중 지정한 요소만 제외하고 선택합니다.
  • .slice() 메서드는 선택한 요소에 지정한 인덱스를 선택합니다.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		li.on {font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
		ul.on {font-size: 90%; color: #3d90b7; background-color: #e7f6fd; border-radius: 4px; border: 1px dashed #3d90b7;}
	</style>
</head>
<body>
	<h3>필터링(Filtering)</h3>
	<div class="list">
		<ul>
			<li class="one1">.eq() 메서드는 선택한 요소의 인덱스 번호를 갖는 요소를 반환합니다.</li>
			<li class="one2">.filter() 메서드는 선택된 요소에서 한 번 더 필터링하여 요소를 선택합니다.</li>
			<li class="one3">.first() 메서드는 선택한 요소의 첫 번째 요소를 반환합니다.</li>
			<li class="one4">.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
			<li class="one5">.is() 메서드는 선택한 요소의 상태가 지정한 속성과 일치하면 <strong>true</strong>를 반환합니다.</li>
			<li class="one6">.last() 메서드는 선택한 요소의 마지막 요소를 반환합니다.</li>
			<li class="one7">.map() 메서드는 배열의 데이터를 변환시켜 새로운 배열 객체를 만듭니다.</li>
			<li class="one8">.not() 메서드는 선택한 요소 중 지정한 요소만 제외하고 선택합니다.</li>
			<li class="one9">.slice() 메서드는 선택한 요소에 지정한 <strong>인덱스</strong>를 선택합니다.</li>
		</ul>
	</div>

	<div class="btn">
		<ul>
			<li><input type="radio" name="radio" id="ex1" value="1"><label for="ex1">$(".list li").eq(3).addClass("on")</label></li>
			<li><input type="radio" name="radio" id="ex2" value="2"><label for="ex2">$(".list li").filter(".one6").addClass("on");</label></li>
			<li><input type="radio" name="radio" id="ex3" value="3"><label for="ex3">$(".list li").has("strong").addClass("on");</label></li>
			<li><input type="radio" name="radio" id="ex4" value="4"><label for="ex4">$(".list li").first().addClass("on");</label></li>
			<li><input type="radio" name="radio" id="ex5" value="5"><label for="ex5">$(".list li").last().addClass("on");</label></li>
			<li><input type="radio" name="radio" id="ex6" value="6"><label for="ex6">$(".list li").not(".one3").addClass("on");</label></li>
			<li><input type="radio" name="radio" id="ex7" value="7"><label for="ex7">$(".list li").slice(4,7).addClass("on");</label></li>
		</ul>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	<script>
		var btn = $(".btn > ul > li > input");

		btn.click(function(){
		var num = $(this).attr("value");
		$("*").removeClass("on");

		if(num == 1){$(".list li").eq(3).addClass("on");}
		if(num == 2){$(".list li").filter(".one6").addClass("on");}
		if(num == 3){$(".list li").has("strong").addClass("on");}
		if(num == 4){$(".list li").first().addClass("on");}
		if(num == 5){$(".list li").last().addClass("on");}
		if(num == 6){$(".list li").not(".one3").addClass("on");}
		if(num == 7){$(".list li").slice(4,7).addClass("on");}
	});

	</script>

</body>
</html>

Sample2 li 태그 안에 strong 태그를 사용한 요소를 선택하는 예제입니다.

필터링(Filtering)

  • .eq() : 인덱스 번호에 해당하는 요소를 찾습니다.
  • .filter() : 선택된 요소 집합에서 선택자를 추가하거나 함수를 사용해서 원하는 결과를 추출해냅니다.
  • .first() : 선택된 요소 집합에서 첫번째 자식 요소를 찾습니다.
  • .has() : 선택된 요소들이 자신의 자식 요소에서 주어진 선택자가 있는지를 확인하여 범위를 축소합니다.
  • .is() : 문서 객체의 특징을 판별합니다.
  • .last() : 선택된 노드 집합에서 마지막 자식 요소를 찾습니다.
  • .map() : 대상이 되는 요소 집합의 배열을 새롭게 변경합니다.
  • .not() : 조건에 맞지 않은 것들만 찾아서 선택합니다.
  • .slice() : 선택된 집합을 조건의 범위로 재선택해줍니다.
<script type="text/javascript">
    $(document).ready(function(){    	
	        //filter를 이용한 한번 더 필터 역할을 해주는 function 기능입니다.
		$(".list2 li")                                     //list2 li를 선택합니다.
			.filter(function(index){                     //li를 선택한 후 한번 더 선택합니다.
				return $( "strong", this ).length === 1;            //li 중에 strong 태그가 1개인 것을 찾습니다.
			}).addClass("on");                         //클래스 on을 추가합니다.
	}); 
</script>

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>제이쿼리(jQuery)</title>
		<style>
		.list2 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; display:inline-block}
		</style>
	</head>
    <body>
		<h3>필터링(Filtering)</h3>
		<div class="list2">
			<ul>
				<li class="filter0">.eq() : 인덱스 번호에 해당하는 <strong>요소</strong>를 찾습니다.</li>
				<li class="filter1">.filter() : 선택된 요소 집합에서 선택자를 추가하거나 함수를 사용해서 원하는 결과를 추출해냅니다.</li>
				<li class="filter2">.first() : 선택된 요소 집합에서 첫번째 자식 요소를 찾습니다.</li>
				<li class="filter3">.has() : 선택된 요소들이 자신의 자식 요소에서 주어진 선택자가 있는지를 확인하여 범위를 축소합니다.</li>
				<li class="filter4">.is() : 문서 객체의 특징을 판별합니다.</li>
				<li class="filter5">.last() : 선택된 노드 집합에서 <strong>마지막</strong> 자식 요소를 찾습니다.</li>
				<li class="filter6">.map() : 대상이 되는 요소 집합의 배열을 새롭게 변경합니다.</li>
				<li class="filter7">.not() : 조건에 맞지 않은 것들만 찾아서 선택합니다.</li>
				<li class="filter8">.slice() : 선택된 집합을 조건의 범위로 재선택해줍니다.</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(){    		
				$(".list2 li")
					.filter(function(index){
						return $( "strong", this ).length === 1;
					}).addClass("on");
			}); 
		</script> 
	</body>
</html>

Sample3 li 태그 요소를 순차적으로 선택하는 예제입니다.

필터링(Filtering)

  • .eq() : 인덱스 번호에 해당하는 요소를 찾습니다.
  • .filter() : 선택된 요소 집합에서 선택자를 추가하거나 함수를 사용해서 원하는 결과를 추출해냅니다.
  • .first() : 선택된 요소 집합에서 첫번째 자식 요소를 찾습니다.
  • .has() : 선택된 요소들이 자신의 자식 요소에서 주어진 선택자가 있는지를 확인하여 범위를 축소합니다.
  • .is() : 문서 객체의 특징을 판별합니다.
  • .last() : 선택된 노드 집합에서 마지막 자식 요소를 찾습니다.
  • .map() : 대상이 되는 요소 집합의 배열을 새롭게 변경합니다.
  • .not() : 조건에 맞지 않은 것들만 찾아서 선택합니다.
  • .slice() : 선택된 집합을 조건의 범위로 재선택해줍니다.
<script type="text/javascript">
	$(document).ready(function(){    		
                //list 자식 li 중 3의 배수 요소를 선택하는 방법입니다.
		$(".list3 li")                //list3의 li 요소들을 선택합니다.
			.filter(function(index){           //index는 li의 총 갯수를 의미합니다.
				return index % 3 === 2;           //index를 3으로 나눈 나머지가 2가 됐을 때 클래스 on을 추가합니다.
                                           // 0 % 3 = 3
                                           // 1 % 3 = 1
                                           // 2 % 3 = 2 (0)
                                           // 3 % 3 = 0
                                           // 4 % 3 = 1
                                           // 5 % 3 = 2 (0)
                                           //...........
			}).addClass("on");                
	}); 
</script>

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>제이쿼리(jQuery)</title>
		<style>
		.list3 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; display:inline-block}
		</style>
	</head>
    <body>
		<h3>필터링(Filtering)</h3>
		<div class="list3">
			<ul>
				<li class="filter0">.eq() : 인덱스 번호에 해당하는 <strong>요소</strong>를 찾습니다.</li>
				<li class="filter1">.filter() : 선택된 요소 집합에서 선택자를 추가하거나 함수를 사용해서 원하는 결과를 추출해냅니다.</li>
				<li class="filter2">.first() : 선택된 요소 집합에서 첫번째 자식 요소를 찾습니다.</li>
				<li class="filter3">.has() : 선택된 요소들이 자신의 자식 요소에서 주어진 선택자가 있는지를 확인하여 범위를 축소합니다.</li>
				<li class="filter4">.is() : 문서 객체의 특징을 판별합니다.</li>
				<li class="filter5">.last() : 선택된 노드 집합에서 <strong>마지막</strong> 자식 요소를 찾습니다.</li>
				<li class="filter6">.map() : 대상이 되는 요소 집합의 배열을 새롭게 변경합니다.</li>
				<li class="filter7">.not() : 조건에 맞지 않은 것들만 찾아서 선택합니다.</li>
				<li class="filter8">.slice() : 선택된 집합을 조건의 범위로 재선택해줍니다.</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(){    		
				$(".list3 li")
					.filter(function(index){
						return index % 3 === 2;
					}).addClass("on");
			}); 
		</script> 
	</body>
</html>

Share

Related Articles more
공유하기 링크

Ad

Comments