프로필카테고리질문하기
로그인 계정 만들기

div가 비어있는지 안비어 있는지 확인후에 class적용하는법

03 개월 전
<div class="box"> <div class="mp_item_item1"> sample01 </div> <div class="mp_item_item6"> <div class="price" style="text-align: left"> 정가<s>17,800원</s> </div> </div> <div class="price mp_item_item5"> 10,600원 </div> </div> <br><br><br> <div class="box"> <div class="mp_item_item1"> sample02 </div> <div class="mp_item_item6"> </div> <div class="price mp_item_item5"> 10,600원 </div> </div> <style> .red{ color:red; } </style>

위와같은경우에,

[mp_item_item6]클래스에 div엘레멘트가 들어있는경우와 들어있지않은경우가 있는데,

div엘레멘트가 들어있는 경우에만 <div class="price  mp_item_item5">에

[red]클래스를 추가시켜서 글씨를 빨간색으로 표현하고 싶은데요,

클래스명 변경 및 엘레멘트의 추가가 불가능해서 자바스크립트로 구현을 해야 할거 같습니다.

"box클래스의 mp_item_item6 클래스에 하위 div(혹은 클래스)가 있을경우 mp_item_item5에 red클래스를 추가  "

라는식의 명령을 어떻게 구현해야할지를 모르겠네요..

element.hasChildNodes 를 사용해보려고 했으나 실력부족으로... 

고수님들의 조언 부탁드립니다!

답변하기 의견 추가
의견 (0)
더 많은 의견 보기

답글 (1)

엘리먼트가 비어있는지 확인하기

엘리먼트에 자식이 있는지 알아보기 위해서는 hasChildNodes 함수,  childNodes 프로퍼티, firstChild 프로퍼티 중 하나를 사용할 수 있어요.

<div class="parent">abc</div>var node = document.querySelector('.parent'); /* parent라는 클래스를 가진 첫 번째 엘리먼트를 node라는 변수에 할당했어요. */ var hasChildNode; // 셋 중에 하나를 사용하세요. hasChildNode = node.hasChildNodes(); // 이걸 사용할 수도 있고, hasChildNode = 0 < node.childNodes.length; // 이걸 사용할 수도 있고, hasChildNode = node.firstChild != null; // 이걸 사용할 수도 있어요. if(hasChildNode) { /* 비어있지 않군요! */ } else { /* 비었어요 */ }

결과: hasChildNodetrue에요. 왜냐하면 div.parent 안에 abc 라는 텍스트 노드가 있기 때문이에요.

엘리먼트 안에 엘리먼트가 있는지 확인하기

텍스트 노드 또는 다른 종류의 노드가 아니라, 특히 엘리먼트 노드가 있는지 확인하고 싶을 때가 있어요.

그러기 위해서는 children 프로퍼티, firstElementChild 프로퍼티, 또는 querySelector 함수 중 하나를 사용할 수 있어요.

<div class="parent">abc</div>var node = document.querySelector('.parent'); var hasChildElement; // 셋 중에 하나를 사용하세요. hasChildElement = node.children.length != 0; // 이걸 사용할 수도 있고, hasChildElement = node.firstElementChild != null; // 이걸 사용할 수도 있고, hasChildElement = node.querySelector('*') != null; // 이걸 사용할 수도 있어요.

결과: hasChildElementfalse에요. 왜냐하면 div.parent 안에 엘리먼트가 없기 때문이에요.

엘리먼트 안에 특정한 엘리먼트가 있는지 확인하기
엘리먼트 안에 특정한 엘리먼트가 있는지 알아보려면 querySelector를 사용하면 좋아요.
<div class="parent"> <div class="apple">Hello</div> <div class="orange">Yes</div> </div>var node = document.querySelector('.parent'); // CHECK APPLE var hasApple = node.querySelector('.apple') != null; if(hasApple) { /* node안에 .apple이 있어요 */ } else { /* node안에 .apple이 없어요 */ } // CHECK BANANA var hasBanana = node.querySelector('.banana') != null; if(hasBanana) { /* node안에 .banana가 있어요 */ } else { /* node안에 .banana가 없어요 */ }
결과: hasAppletrue이고, hasBananafalse에요.
그리고 한 가지 더

CSS를 사용할 수 있는 상황이라면 되도록이면 CSS를 사용하면 더 좋아요.

질문과 같은 상황이라면 서버 사이드에서 div에 새로운 class를 더해줄 수 있는 방법도 고민해보세요.

의견 추가
의견 (1)
감사합니다!!!!
2 개월 전
더 많은 의견 보기

정보

업보트
1
질문됨
3 개월 전
최근 활동
2 개월 전

카테고리

JavaScriptCSSHTML