[jQuery] 필터링메소드 first() last() eq() filter() not() has() is() map() slice()

[jQuery] 필터링메소드

필터링 메소드 .first() .last() .eq() .filter() .not() .has() .is() .map() .slice()

출처 :: 필터링 메소드 .first() .last() .eq() .filter() .not() .is()

• 필터링(filtering)메소드

  • DOM트리에서 선택한 요소를 필터링하기 위한 메소드는 다음과 같다.

    메소드	설명
    .first()	선택한 요소 중에서 첫 번째 요소를 선택함.
    .last()	선택한 요소 중에서 마지막 요소를 선택함.
    .eq()	선택한 요소 중에서 전달받은 인덱스에 해당하는 요소를 선택함.
    .filter()	선택한 요소 중에서 전달받은 선택자에 해당하거나, 함수 호출의 결과가 참(true)인 요소를 모두 선택_함.
    .not()	선택한 요소 중에서 전달받은 선택자에 해당하거나, 함수 호출의 결과가 참(true)인 요소를 제외한 나머지 요소를 모두 선택함.
    .has()	선택한 요소 중에서 전달받은 선택자에 해당하는 요소를 자손요소로 가지고 있는 요소를 모두 선택함.
    .is()	선택한 요소 중에서 전달받은 선택자에 해당하는 요소가 하나라도 존재하면 참(true)을 반환.
    .map()	선택한 요소 집합의 각 요소마다 콜백함수를 실행하고, 그 반환값으로 구성된 jQuery 객체를 반환.
    .slice()	선택한 요소 중에서 전달받은 인덱스 범위에 해당하는 요소만을 선택함.

   

 

1. first() 메소드와 last() 메소드

.first()메소드는 선태간 요소 중에서 첫 번째 요소가 선택되고,

.last()메소드는 마지막 요소가 선택된다.

$('li').first().css('background-color', 'red');
$('li').last().css('background-color', 'yellow');

위 예제의 첫 번째 요소의 CSS 속성이 "red"로 설정되고 마지막 요소의 CSS 속성이 "yellow"로 설정된다.

 

 

2. eq() 메소드

.eq()메소드는 선택한 요소중에서 전달받은 인덱스에 해당하는 요소를 선택한다.

인덱스는 선택된 요소들의 첫 번째 요소를 0으로 놓고, 앞에서부터 검색된다. 인덱스가 음수인 경우에는 선택한 요소 집합의 맨 마지막 요소를 인덱스 -1로 놓고 뒤에서부터 검색된다.

$('li').eq(0).css('background-color', 'red');
$('lli').eq(-1).css('background-color', 'yellow');

위 예제는 인덱스가 0에 해당하는 첫 번째 요소의 CSS 속성이 "red"로 설정되고, 인덱스 -1에 해당하는 마지막 요소의 CSS 속성이 "yellow"로 설정된다.

 

 

3. filter() 메소드

.filter()메소드는 선택한 요소 중에서 전달받은 선택자에 해당하거나, 함수호출의 결과가 참(true)인 요소가 모두 선택된다.

이 메소드는 인수로 선택자나 jQuery 객체, HTML DOM 요소 등을 전달받을 수 있다.

또한 요소의 집합의 각 요소를 체크할 수 있는 함수를 전달할 수도 있다.

$('li').filter(':odd').css('background-color', 'yellow');

위 예제에서 사용된 :odd 선택자는 인덱스가 홀수인 요소를 모두 선택하는 선택자이므로 두 번째와 네 번째 요소가 선택된다.

여기서 주의할 점은 jQuery의 인덱스는 언제나 0부터 시작하기 때문이다.

따라서 :odd 나 :even선택자를 사용할 때는 언제나 인덱스가 0부터 시작한다는 사실을 염두에 두고 사용해아 한다.

 

 

4. not() 메소드

.not() 메소드는 선택한 요소 중에서 전달받은 선택자에 해당하거나, 함수 호출의 결과가 참(true)인 요소를 제외한 나머지 요소가 모드 선택된다.

즉, .filter()메소드와는 정반대로 동작하여 요소가 선택된다.

$('li').not(':odd').css('background-color', 'yellow');

위 예제에서 사용된 :odd선택자는 인덱스가 홀수인 요소를 모두 선택하는 선택자이므로 두 번째와 네번째 요소의 반대인 첫번째와 네번째 요소가 선택된다.

 

 

5. has() 메소드

.has()메소드는 선택한 요소 중에서 전달받은 선택자에 해당하는 요소를 하위 요소로 가지고 있는 요소가 모두 선택된다.

$('li').has('b').css('background-color', 'yellow');

위 예제는 선택한 <li> 요소 중에서 하위 요소로 <b>요소를 가지고 있는 요소만의 CSS 속성을 변경한다.

<ul>
  <li>list item 1</li>
  <li>list item 2
  	<ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

$('li').has('ul').css('background-color', 'red');
// list item 2-a , list-item 2-b 만 변경.

위 예제는 부모요소인 <ul>안의 <li>의 요소만 CSS 속성을 변경한다.

 

 

6. is() 메소드

.is()메소드는 선택한 요소 중에서 전달받은 선택자에 해당하는 요소가 하나라도 존재하면 참(true)을 반환한다.

<ul>
  <li>에스프레소</li>
  <li><b>아메리카노</b></li>
  <li>카페라떼</li>
</ul>
<p></p>

if($('b').parents().is('ul')) {
  $('p').text('<b>요소의 상위 요소로 <ul>요소가 존재한다.')
}

위 예제에서 우선 선택한 <b>요소의 상위요소를 선택하여 , 선택된 상위 요소중에 <ul>요소가 존재하는지 여부를 .is()로 체크하고 있다.

 

 

7. map() 메소드

.map()메소드는 선택한 요소 집합의 각 요소마다 지정된 콜백함수를 실행하고, 그 반환값으로 구성된 jQuery 객체를 반환한다.

<p><b>Value: </b></p>
<form>
  <input type="text" name="name" value="John">
  <input type="text" name="password" value="password">
  <input type="text" name="url" value="https://johnresig.com//">
</form>

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

위 예제는 <p>요소에 각각의 <input> value의 값을 반환하는 콜백함수를 실행한다.

콜백함수의 실행으로 반환되는 값들은 .get()메소드를 통해 배열로 반환되며, 다시 .join()메소드를 통해 문자열로 반환된다.

 

 

8. slice() 메소드

.slice()메소드는 선택한 요소 중에서 전달받은 인덱스 범위에 해당하는 요소만 선택된다.

<ul>
  <li>list item 1</li><!-- index : 0 -->
  <li>list item 2</li><!-- index : 1 -->
  <li>list item 3</li><!-- index : 2 -->
  <li>list item 4</li><!-- index : 3 -->
  <li>list item 5</li><!-- index : 4 -->
</ul>

$('li').slice(2).css('background-color', 'yellow');
$('li').slice(1, 3).css('border', '1px solid green');

위 예제는 첫번째 줄에서 선택한 <li>요소 중 본인포함 나머지 인덱스를 선택하고 (list-item 3 / list-item 4 / list-item 5) 선택.

아래 예제는 .slice(본인인덱스포함, 인덱스미포함) 이므로 list-item 2 / list-item 3이 선택된다.