같은 이름의 중복 Class 제어

JavaScript, jQuery, Java

같은 이름의 중복 Class 제어

보리하늘 2017. 12. 19. 17:31

css 스타일을 같은걸 쓰기때문에 class 이름이 중복된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="TreePd">
    <div class="Tree1" id="test"> 
        <div class="Tree_Tx1" value="443">
 
            <img src="/images/usolver/com/map/tree_plus.gif" alt="plus"/>
            <input type="checkbox" name="chk_tree" disabled="disabled"/>기본도</span>
 
        </div>
        <div class="Tree_sTx">
 
            <input type="checkbox" name="chk_tree" value="LP_PA_CBND" />연속지적
 
        </div>
    </div>
</div>
<div class="TreePd">
    <div class="Tree1">
        <div class="Tree_Tx1" value="453">
 
            <img src="/images/usolver/com/map/tree_plus.gif" alt="plus"/>
            <input type="checkbox" name="chk_tree" disabled="disabled"/>도로
 
        </div>
        <div class="Tree_sTx">
 
            <input type="checkbox" name="chk_tree" value="LP_PA_CBND" />도로면
 
        </div>
    </div>
</div>
<div class="TreePd">
    <div class="Tree1">
        <div class="Tree_Tx1" value="459">
 
            <img src="/images/usolver/com/map/tree_plus.gif" alt="plus"/>
            <input type="checkbox" name="chk_tree" value="459" disabled="disabled"/>상수
 
        </div>
    </div>
</div>
Colored by Color Scripter
cs

** 자바스크립트에서 선택된 div 만 제어하고 싶을 때!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(".Tree1").click(function(){           // 트리메뉴
    if( $(this).children(".Tree_sTx").is(":visible") ){
        
        $(this).children(".Tree_sTx").slideUp();
 
        //선택된 div의 이미지 src 변환
        $(this).find("img[alt='minus']").attr('src', '/images/usolver/com/map/tree_plus.gif'); 
        $(this).find("img[alt='minus']").attr('alt', 'plus');
    
    }else{      
        
        var tbnm = $(this).children(".Tree_Tx1").attr('value');     //value 뽑기
        //$(this).text() 나 $(this).children(".Tree_Tx1").text() 하면 텍스트만 뽑을 수 있다.
  
        $(this).children(".Tree_sTx").slideDown();
        $(this).find("img[alt='plus']").attr('src', '/images/usolver/com/map/tree_minus.gif');
        $(this).find("img[alt='plus']").attr('alt', 'minus');
    }
});
Colored by Color Scripter
cs

$(this).children("클래스 명").

$(this).find("클래스 명").

을 하게되면 선택된 div 안에 있는 자식들을 제어할 수 있게된다.

728x90

저작자표시