<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>filter::동일한 여러개의 태그중에서 조건을 부여해서 걸러내는 기능</title>
<style type="text/css">
.css{background: greenyellow; color:blue;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//1.
//h1 tag가 여럿이기 때문에 이 안에서 적용 시킬 것을 filter()를 통해서 지정해 줄 수 있습니다.
/* $('h1').filter(function(index){
//index를 인자로 써줍니다. 여러개의 배열중에서 순서대로 함수 안에 구현부를 실행하겠다는 말입니다.
//구현부에 filter해줄 알고리즘을 넣습니다. 아래는 3의 배수 또는 5의 배수의 index에 해당하는 hi에만 그다음에 효과를 적용하겠다는 말입니다.
return index%3 ==0||index%5==0;
}).css({
background:'greenyellow',
color:'blue'
}); */
/*
$('h1').filter(function(index){
return index%3 ==0||index%5==0;
}).addClass('css'); */
//2. css()중첩...
//h1의 전체 배경색을 pink로 지정....이때 짝수번째 태그만 골라서 글자색을 pink로 지정
$('h1').css('background','pink').filter(':even').css('color','red');//(h1:even)
$('h1').css('background','pink').filter(':odd').css('color','red');//(h1:odd) 이미 앞에 h1이 잇어서 생략 가능합니다.
});
</script>
</head>
<body>
<h1> Item-0</h1>
<h1> Item-1</h1>
<h1> Item-2</h1>
<h1> Item-3</h1>
<h1> Item-4</h1>
<h1> Item-5</h1>
<h1> Item-6</h1>
<h1> Item-7</h1>
</body>
</html>
