권형&오형의 일상

[권형] 07. 여러 개 선택된 태그 관리 (메서드 활용) 본문

개발/Jquery

[권형] 07. 여러 개 선택된 태그 관리 (메서드 활용)

권형&오형 2017. 9. 26. 14:54
⑴ eq 메서드 사용 방법 : 특정 순서의 태그를 선택하거나 순차적으로 접근 가능
     $("선택자").eq(번호)
     
1
2
$("p").eq(1)
//p태그들 중 2번째 p태그 선택
cs
1
$("p:nth-child(2)")
cs
 
     *필터 선택자는 수학적 표현방법에 따라 1번 부터 시작하지만 eq메서드의 경우 자바스크립트의 언어 구조에 따라 0부터 시작

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE HTML>
<head>
    <title>Simple</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="index.css">
    <script src="index.js"></script>
</head>
<body>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
    <p>line</p>
</body>
</html>
cs
1
2
3
4
5
6
7
8
9
$(function(){
    var p_tag = $("p"); // <p>태그를 선택해서 변수에 넣음
    var p_tag_len = p_tag.lengh; //선택된 태그의 개수를 구함
    for(var i=0;i<p_tag.lengh;i++){ //for문을 이용한 순차접근
        var tmp_color="#"+i+i+i+i+i+i; //색상 코드 생성
        p_tag.eq(i).css("background",tmp_color);
        // 순차 접근 후 색상 적용
    }
});
cs

 
⑵ each 메서드 사용(for in과 비슷하게 동작)
     for in은 묶여 있는 요소의 키(속성이나 메서드의 이름, 인덱스)만 읽어와 키를 통해 값을 사용
     each 메서드는 키와 값을 한 번에 읽어와 사용
     
$("선택자").each(function(인덱스,선택된 요소의 선택자){});

1
2
3
4
5
6
<body>
    <p>1번째</p>
    <p>2번째</p>
    <p>3번째</p>
    <p>4번째</p>
</body>
cs

1
2
3
4
$("p").each(function(idx,item){
    //idx는 0부터 3까지 변하면서 item에 <p> 태그가 하나씩 선택 됨.
    //item에 들어오는 값은 선택자 이므로 $(item) 형태    
});
cs

1
2
3
4
5
6
7
$(function(){
    var p_tag=$("p");
    p_tag.each(function(){
        var tmp_color="#"+idx+idx+idx+idx+idx+idx;  // 색상 코드 생성
        $(item).css("background-color",tmp_color); // 순차 접근 후 색상 적용
    });
});
cs
 
⑶ filter 메서드 사용
1
$("p:even")
cs

1
$("p").filter("even")
cs

1
2
3
4
5
6
var $sel_p = $("p"); //$sel_p
//...
//다른 코드 사용
//
$sel_p.filter(":even").css("color","red");
//$sel_p 중에서 짝수 번째만 선택해서 color 적용
cs

1
2
3
4
5
6
7
8
var $sel_p = $("p"); //$sel_p에 모든 태그 선택
//자바스크립트는 변수 이름에 $문자를 사용할 수 있다.
//$를 사용하는 이유는 jQuery를 이용해서 태그를 선택한 변수라는 의미
//...
//다른 코드 사용
//
$sel_p.filter(":even").css("color","red");
//$sel_p 중에서 짝수 번째만 선택해서 color 적용
cs

1
$("선택자").filter(function(인덱스){})
cs

1
2
3
4
5
6
$("p").filter(function(idx){
    if(idx%2==0){
        return true;
    }
    return false;
}).css("backgroud","yellow");
cs


'개발 > Jquery' 카테고리의 다른 글

[권형] 06. 고급 선택자  (1) 2017.09.26
[권형] 05. 선택자  (0) 2017.09.26
[권형] 04. jQuery 키워드 치환  (0) 2017.09.26
[권형] 03. jQuery 시작 코드  (0) 2017.09.26
[권형] 02. jQuery의 코드 형태  (0) 2017.09.26
[권형] 01. jQuery 정의(참고)  (0) 2017.09.26
공유하기 링크
'개발/Jquery' Related Articles more
Comments