[Selector] JQ - :empty 선택자 - 자식/내용 없는 텅 빈 요소 선택 (= :empty선택자 = 엠프티 선택자) ※ :parent 반대.

1. :empty 예제 - 내용 없는 TD 배경색 변경
2. :empty 정의
3. :empty 구문

:empty 예제 - 내용 없는 TD 배경색 변경

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $(":empty").css("background-color", "yellow");

});

</script>

<table border="1">

  <tr>

    <th>사이트명</th>

    <th>도메인</th>

    <th>소개</th>

  </tr>

  <tr>

    <td>홈짱닷컴</td>

    <td>Homzzang.com</td>

    <td></td>

  </tr>

  <tr>

    <td>야메떼닷컴</td>

    <td>yamette.com</td>

    <td></td>

  </tr>  

</table>

 

결과보기

:empty 정의

 

빈 요소 (= 자손 요소와 텍스트가 없는 요소) 선택.

 

---

 

1.

다른 선택자와 함께 사용해, 선택 범위 줄일 때 사용.

 

2. cf.

• :parent 선택자 - 안 비어있는 요소 선택.
• :contains() 선택자 - 지정 문자열 포함 요소 선택.
• :has() 선택자 - 지정 요소 포함 요소 선택.

 

:empty 구문

 

$(":empty")