on
JQuery Traversing, Miscellaneous, Tree 필터링
JQuery Traversing, Miscellaneous, Tree 필터링
< script type = "text/javascript" >
$( function () {
//eq
$( "li" ).eq( 0 ).css( "color" , "red" ).end(); //한번 골라낸 li에서 계속 .으로 연결해 필터링 가능 , ':'으로는 까다로움
$( "li" ).eq( 2 ).css( "color" , "blue" ).end();
$( "li" ).eq( 5 ).css( "color" , "yellow" ).end();
/////////////////////////////////////////////
//.filter
$( "li" ).filter( ".my" ).css( "color" , "red" ).end() //class로 필터링
.filter( "#a" ).css( "color" , "blue" ).end() //id로 필터링
.filter( ":even" ).css( "font-size" , "40px" ) //짝수번째로 필터링
console .log( "--------------------------------" )
/////////////////////////////////////////////
$( "li" ).filter( function (idx, ele) { //idx = index, ele = element
//for문이 동작하는 것처럼 각각의 요소를 하나씩 집어 넣음==>> li의 요소들 (A1~A8)까지 하나씩 들어감.
//ele = 태그임 !!!!!!!!!!!!!
//ele = this !!!!!!!!!!!!!
console .log( "ele>>>>>>>>>>>>" ,ele);
console .log( "this>>>>>>>>>>" , this );
return ele.innerText = = "A4" ; //A4만 선택
}).css( "color" , "red" ) //return 에서 ele들 중 innerText가 A4인 애들만 리턴 해줘서 A4만 css적용
.end()
.filter( function (idx, ele) { //앞에서 end로 끝났으니까 다시
//$("li").filter~~로 시작하는 것 !
console .log( "filter>>>>>>>>>>>" ,ele); //A4도 다시 포함됨
return idx% 3 = = 0 ; //3의 배수인애들
}).css( "font-size" , "40px" )
///////////////////////////////////////////////////////
$( "li" ).not( ".my" ).css( "color" , "red" ).end() //class이름이 my가 아닌애들 css적용
.not( ":even" ).css( "font-size" , "40px" ); //li들 중 index !!!0부터!!! 시작 홀수인애들
//////////////////////////////////////////////////////////
$( "li" ).not( function (idx, ele) { //function 앞에 not
return ele.innerText = = "A4" //ele.innerText값이 A4가 아닌 애들을 리턴
}).css( "color" , "red" )
.end()
.not( function (idx, ele) {
return idx% 3 = = 0 //idx가 3의 배수가 아닌 애들 리턴
}).css( "font-size" , "40px" )
///////////////////////////////////////////////////////////
var x = $( "li" ).is( ".my" );
//1차 필터링 후 2차 선택자와 일치하는 요소가 있으면 true 없으면 false
console .log(x); // true
///////////////////////////////////////////////////////
var x = $( "li" ).is( function (idx, ele) { //함수의 리턴값이 있으면 true 없으면 false
console .log(ele); //다시 한 번 말하지만 ele는 태그 !
return ele.innerText = "A8"
});
console .log(x); //true
var fnx = $( "li" ).is( function (idx, ele) {
var fnele = $(ele) // 태그 -> jquerry객체로 전환
console .log( ">>" ,fnele);
return fnele.text() = = "A8" ;
});
console .log(fnx); //true
})
< / script >
< / head >
< body >
< p > Hello < / p >
< ul >
< li > A1 < / li >
< li > A2 < / li >
< li class = "my" > A3 < / li >
< li > A4 < / li >
< li > A5 < / li >
< li id = "a" > A6 < / li >
< li > A7 < / li >
< li > A8 < / li >
< / ul >
from http://cocoshin.tistory.com/49 by ccl(A) rewrite - 2021-12-24 03:27:51