.filter()
선택한 요소에서 선택자, 변수, 함수를 통해 선택하는 메서드입니다.
.filter()
선택한 요소에서 선택자, 변수, 함수를 통해 선택하는 메서드입니다.
문법(Syntax)
$("선택자").filter("선택자");
$("선택자").filter(변수);
$("선택자").filter(함수);
정의(Definition)
- 선택된 요소에서 선택자(태그, 아이디, 클래스)를 통해 선택합니다.
- 선택된 요소에서 변수를 통해 선택합니다.
- 선택된 요소에서 함수를 통해 선택합니다.
비교(Compare)
- .filter()는 선택한 요소에서 선택자, 변수, 함수를 통해 선택하는 메서드입니다.
Sample1
선택자, 클래스를 통해 선택하는 예제입니다.
결과
탐색(Traversing)
- .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
- .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
- .first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.
- .has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
- .is() 메서드는 선택된 요소 객체의 특징을 판별합니다.
- .last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.
jquery
$(".list1 li").filter(":even").addClass("rLine");
$(".list1 li").filter(".select").addClass("rLine");
html
<h3>탐색(Traversing)</h3>
<div class="list1">
<ul>
<li>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
<li>.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
<li class="select">.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
<li>.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
<li>.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
<li>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
</ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Sample</title>
<style>
.select:before {content:'Select'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
.rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
</style>
</head>
<body>
<h3>탐색(Traversing)</h3>
<div class="list1">
<ul>
<li>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
<li>.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
<li class="select">.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
<li>.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
<li>.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
<li>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
</ul>
</div>
<div class="choice1">
<a href="#" class="off1">리셋</a>
<a href="#" class="btn1">클릭하면 <em>filter(":even")</em>를 선택합니다.</a>
<a href="#" class="btn2">클릭하면 <em>filter(".select")</em>를 선택합니다.</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".choice1 .off1").on("click", function(e){
e.preventDefault();
$(".list1 li").removeClass("rLine");
});
$(".choice1 .btn1").on("click", function(e){
e.preventDefault();
$(".list1 li").filter(":even").addClass("rLine");
});
$(".choice1 .btn2").on("click", function(e){
e.preventDefault();
$(".list1 li").filter(".select").addClass("rLine");
});
</script>
</body>
</html>
Sample2
변수를 통해 선택하는 예제입니다.
결과
탐색(Traversing)
- .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
- .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
- .first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.
- .has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
- .is() 메서드는 선택된 요소 객체의 특징을 판별합니다.
- .last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.
jquery
var list = $(".list2 li").eq(3);
$(".choice2 .btn1").on("click", function(e){
$(".list2 li").filter(list).addClass("rLine");
});
html
<h3>탐색(Traversing)</h3>
<div class="list2">
<ul>
<li>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
<li>.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
<li>.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
<li>.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
<li>.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
<li>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
</ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Sample</title>
<style>
.select:before {content:'Select'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
.rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
</style>
</head>
<body>
<h3>탐색(Traversing)</h3>
<div class="list2">
<ul>
<li>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
<li>.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
<li>.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
<li>.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
<li>.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
<li>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
</ul>
</div>
<div class="choice2">
<a href="#" class="off1">리셋</a>
<a href="#" class="btn1">클릭하면 <em>filter(list)</em>를 선택합니다.</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".choice2 .off1").on("click", function(e){
e.preventDefault();
$(".list2 li").removeClass("rLine");
});
var list = $(".list2 li").eq(3);
$(".choice2 .btn1").on("click", function(e){
e.preventDefault();
$(".list2 li").filter(list).addClass("rLine");
});
</script>
</body>
</html>
Sample3
함수를 통해 선택하는 예제입니다.
결과
탐색(Traversing)
- .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
- .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
- .first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.
- .has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
- .is() 메서드는 선택된 요소 객체의 특징을 판별합니다.
- .last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.
jquery
$(".choice3 .btn1").on("click", function(e){
$(".list3 li").filter(function(index){
return index === 1 || index === 2;
}).addClass("rLine");
});
html
<h3>탐색(Traversing)</h3>
<div class="list3">
<ul>
<li>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
<li>.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
<li>.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
<li>.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
<li>.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
<li>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
</ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Sample</title>
<style>
.select:before {content:'Select'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
.rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
</style>
</head>
<body>
<h3>탐색(Traversing)</h3>
<div class="list3">
<ul>
<li>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
<li>.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
<li>.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
<li>.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
<li>.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
<li>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
</ul>
</div>
<div class="choice3">
<a href="#" class="off1">리셋</a>
<a href="#" class="btn1">클릭하면 <em>filter(function)</em>를 선택합니다.</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".choice3 .off1").on("click", function(e){
e.preventDefault();
$(".list3 li").removeClass("rLine");
});
$(".choice3 .btn1").on("click", function(e){
e.preventDefault();
$(".list3 li").filter(function(index){
return index === 1 || index === 2;
}).addClass("rLine");
});
</script>
</body>
</html>
호환성(Compatibility)
메서드 | 버전 | 6 | 7 | 8 | 9 | 10 | 11 | ||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
filter() | jQeury 1.x 버전 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
jQeury 2.x 버전 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | |
jQeury 3.x 버전 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |