211209 TIL - 제이쿼리 정리

Filtering

.eq(index)

$( "li" ).eq( 2 ).css( "background-color", "red" ); // index 2번 
$( "li" ).eq( -2 ).css( "background-color", "red" ); // 뒤에서 두번 째 (index X)
$( "body" ).find( "div" ).eq( 2 ).addClass( "blue" ); // 사용방법

.even() | .odd()

• .even() 짝수번의 index. 즉 0번부터 시작하니 0,2,4 ~ / .odd() 홀수

$( "li" ).even().css( "background-color", "red" );
$( "ul li" ).even().addClass( "highlight" );
$( "li" ).odd().css( "background-color", "red" );

.filter(selector | function | elements | selection)

$( "li" ).filter( ":nth-child(2n)" ).css( "background-color", "red" );
$( "div" ).css( "background", "#c8ebcc" ).filter( ".middle" ).css( "border-color", "red" );
$( "li" )
  .filter(function( index ) {
    return index % 3 === 2;
  })
  .css( "background-color", "red" );

.first() | .last()

• 가장 처음 , 마지막 selector

$( "li" ).first().css( "background-color", "red" );
$( "ul li" ).last().addClass( "highlight" );

Reduce the set of matched elements to the first in the set.

.has(selector)

$( "li" ).has( "ul" ).css( "background-color", "red" ); 
//2-depth ul을 가지고있는 li찾을 수 있음.

.is(selector | function | elements | selection)

$( "div" ).one( "click", function() {
  if ( $( this ).is( ":first-child" ) ) {
    $( "p" ).text( "It's the first div." );
  } else if ( $( this ).is( ".blue,.red" ) ) {
    $( "p" ).text( "It's a blue or red div." );
  } else if ( $( this ).is( ":contains('Peter')" ) ) {
    $( "p" ).text( "It's Peter!" );
  } else {
    $( "p" ).html( "It's nothing <em>special</em>." );
  }

.map(callback)

$( "p" )
  .append( $( "input" ).map(function() {return $( this ).val();})
  .get()
  .join( ", " ) );

.not(selector | function | selection)

• 해당 selector | function | selection 을 제외한 나머지

$( "div" ).not( ".green, #blueone" )
  .css( "border-color", "red" );

.slice( start [, end ] )

• start, end에 index가 들어감

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

$( "li" ).slice( 2 ).css( "background-color", "red" ); 
//index 2번 부터 빨간색으로 변경 (세번째)
$( "li" ).slice( 2, 4 ).css( "background-color", "red" ); 
//index 2 ~ 4번, 단 4번은 포함안되어서 세번째, 네번째 엘리먼트만 빨간색으로 변경
( "li" ).slice( -2, -1 ).css( "background-color", "red" );
// 뒤에서 2번째에서 시작, 1번째에서 마감이기 때문에 뒤에서 두번째 요소만 변경됨.