Element 찾기 (2)

1  <ul id="firstLastFind">

• 1-1
• 1-2  <li title="attributeFind">1-2</li>
• 1-3

2  <ul id="evenOddFind">

• 2-1
• 2-2
• 2-3
• 2-4
• 2-5
• 2-6

1. 속성으로 엘리먼트 찾기

Atrribute(속성)dml 이름과 값으로도 엘리먼트를 찾을 수 있다. '[name=value]' 형식으로 사용해주면 된다. 예제에서는 title속성의 attributeFind인 것을 찾아서 빨간색으로 변경하라는 의미이다.

 

 

$(function(){

$('[title=attributeFind]').css('color', 'red');

});

2. first 필터 셀렉터

이제부터 나오는 필터들은 현재 형제엘리먼트중 특정 엘리먼트를 선택하기 위하여 쓰인다. first 필터 셀렉터는 형제엘리먼트중 제일 위에 있는 엘리먼트를 사용하기 위하여 사용된다. :first 를 사용한다. 예제에서는 1-1이 선택될 것이다.

 

$(function(){

$('#firstLastFind > li:first').css('color', 'red');

});

3. last 필터 셀렉터

last는 형제 엘리먼트 중 맨 마지막 엘리먼트를 선택한다. :last를 이용한다. 예제에서는 1-3이 선택될 것이다.

$(function(){

$('#firstLastFind > li:last').css('color', 'red');

});

4.even 필터 셀렉터

even은 짝수라는 뜻이다. 따라서 짝수 엘리먼트들을 찾아준다. 여기서는 인덱스의 번호가 0 번부터 시작하므로 0,2,4,6 ... 인덱스들이 선택된다. 

$(function(){

$('#evenOddFind > li:even').css('color', 'red');

});

5. odd 필터 

odd는 홀수라는 뜻으로 홀수 엘리먼트들을 찾아준다.

$(function(){

$('#evenOddFind > li:odd').css('color', 'red');

});