jquery 선택자(selectors) 부모(parent) > 자식(child) 배경화면 랜덤으로 바꾸기
jQuery parent > child Selector 에 대해서 알아보도록 하겠습니다.
<div class="color">1</div>
<div class="color">2</div>
<div class="color">3</div>
<div class="change_div">
<div class="color">4</div>
<div class="color">5</div>
<div class="color">6</div>
<div class="color">7</div>
<div>
<div class="color">8</div>
<div class="color">9</div>
<div class="color">10</div>
<div class="color">11</div>
<div class="color">12</div>
</div>
</div>
예를 들어 모든 class color를 선택을 위해서는
$(.color)를 하면 모든 class color가 선언된 부분은 접근이 가능하다.
모든 color가 아니라 change_div안에 자식 color만을 접근하기 위해서는
$(.change_div > .color)로 접근이 가능하며, 여기서 주의할 점은 4, 5, 6, 7만 접근이 가능하다.
8,9,10,11,12에 접근을 위해서는
$(.change_div > div > .color) 이렇게 접근하여야 합니다.
$(function () {
color_change( $(".color"));
});
$("#all_color").click(function () { // 버튼 클릭 이벤트
alert('class color 모두 하얀색으로');
color_change($(".color") , "white"); // 모든 class 배경화면을 하얀색으로 변경
});
$("#in_color").click(function () {
alert('change_div 안에 class color 만 선택 '); // class change_div 안에 color만 background-color 변경
color_change($(".change_div > .color"));
});
$("#in_in_color").click(function () {
alert('모든 컬러 바꾸기');
color_change($(".change_div > div > .color")); // class change_div 안 div 안 class color만 변경
});
function color_change(col , color) {
$.each(col, function (key, value) {
$(value).css('background-color', color === undefined ? "#" + ((1 << 24) * Math.random() | 0).toString(16) : color);
// 선택자를 통해서 받아온 정보를 토대로 color값이 없으면 undefined 임으로 랜덤으로 색깔를 생성
$(value).css('margin-top', '10px');
});
}
결과화면
See the Pen seletor_test by Nami (@NamuNami) on CodePen.
<html>
도움이 되셨다면, 구독과 좋아요.... 아니아니 ...
공감 버튼 꾸욱 눌러주세요 ~~
'[javascript]' 카테고리의 다른 글
| jquery 모든 radio button 모두 초기화 하기 (0) | 2018.05.01 |
|---|---|
| jquery input 값 변경 확인하기 (onchange 함수) (0) | 2018.04.30 |
| 비주얼 스튜디오 코드 한줄 ,복사 지우기 , 정렬 , 주석 단축키 (0) | 2018.04.27 |
| json를 stringify 사용해보기 (json.stringify로 string으로 바꿔주기) (0) | 2018.04.26 |
| Jquery 이벤트 여러개 만들기 (on 함수) (0) | 2018.04.25 |
미나미나미