반응형
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> | 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'); } }); | cs |
$(this).children("클래스 명").
$(this).find("클래스 명").
을 하게되면 선택된 div 안에 있는 자식들을 제어할 수 있게된다.
728x90
반응형
'JavaScript, jQuery, Java' 카테고리의 다른 글
노드 다루기! (부모/형제/자식 노드 찾기, 노드 생성/추가/이동/삭제) (0) | 2017.12.19 |
---|---|
알아두면 매우 유용한 jQuery 선택자 종류 (0) | 2017.12.19 |
ul, li id사용 (0) | 2017.12.19 |
jQuery 선택자 class / id (0) | 2017.12.19 |
체크박스 중복 체크 방지 (0) | 2017.12.19 |
댓글