jQuery / Selector / :empty - 내용이 없는 빈 요소를 선택하는 선택자

:empty

:empty는 내용이 없는 빈 요소를 선택하는 선택자입니다.

문법

$( ':empty' )

예를 들어

$( 'div:empty' )

는 div 요소 중 내용이 없는 것을 선택합니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      table {
        width: 100%;
      }
      td {
        border: 1px solid #bcbcbc;
        padding: 20px;
        text-align: center;
      }
    </style>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'td:empty' ).append( 'N/A' );
      } );
    </script>
  </head>
  <body>
    <h1>jQuery Selector - :empty</h1>
    <table>
      <tr>
        <td>Lorem</td>
        <td></td>
        <td>Ipsum</td>
      </tr>
      <tr>
        <td></td>
        <td>Dolor</td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

표에서 내용이 없는 셀에 N/A 문자열을 추가하는 예제입니다.

Related Posts

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인

jquery.toc jquery.toc는 HTML 문서에 있는 h1, h2 등 h 태그를 이용하여 자동으로 목차를 만들어주는 플러그인입니다. GitHub : https://github.com/ndabas/toc Download : http://ndabas.github.com/toc/assets/jquery.toc.zip 목차 클릭 시 부드럽게 이동하는 효과를 주고 싶다면 다른 플러그인을 사용하세요. 기본 사용법 h 태그가 많은 다음과 같은 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, sans-serif; } a { color: blue; } </style> </head> <body> <h1>Lorem</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing ...

jQuery / HTML 태그 바꾸기

jQuery / HTML 태그 바꾸기

예를 들어 h2를 p로 바꾸고 싶다면 다음과 같이 합니다. $( 'h2' ).contents().unwrap().wrap( '<p></p>' ); h2 요소를 선택하고 내용으로 들어간 후 h2 태그를 없애고 p 태그로 감싼다. 새로운 태그를 붙이면서 클래스를 넣을 수도 있습니다. $( 'h2' ).contents().unwrap().wrap( '<p class="myclass"></p>' );

jQuery / Method / .slideUp() - 요소를 위쪽으로 사라지게 하는 메서드

jQuery / Method / .slideUp() - 요소를 위쪽으로 사라지게 하는 메서드

.slideUp() .slideUp()는 선택한 요소를 위쪽으로 서서히 사라지게 합니다. 문법 .slideUp( ) duration 요소가 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 사라지는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 사라진 후 수행할 작업을 정합니다. 예제 1 버튼을 클릭하면 파란색 배경의 div ...

jQuery / Method / .delay() - 실행 중인 함수를 정해진 시간만큼 중지(연기) 시키는 메서드

jQuery / Method / .delay() - 실행 중인 함수를 정해진 시간만큼 중지(연기) 시키는 메서드

.delay() .delay()는 실행 중인 함수를 정해진 시간만큼 중지(연기) 시킵니다. 문법 .delay( duration ) duration에는 중지할 시간이 들어갑니다. 숫자로 정할 때의 단위는 1/1000초이고, slow 또는 fast로 정할 수 있습니다. slow는 600, fast는 200에 해당합니다. 예제 버튼을 클릭하면 문단이 위로 사라졌다가 1초 뒤에 아래로 내려옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / 맨 위로 부드럽게 이동하는 링크 만들기

jQuery / 맨 위로 부드럽게 이동하는 링크 만들기

사이트의 메뉴는 보통 맨 위에 있습니다. 내용이 긴 문서를 읽은 후 다시 메뉴로 가려면 한참 스크롤을 해야 하는 불편이 있습니다. 이 불편을 없애기 위해 맨 위로 가는 링크를 제공하는 곳이 많습니다. 단순한 링크로 만들면 순식간에 맨 위로 이동하는데, jQuery의 scrollTop()을 이용하면 맨 위로 스르륵 올라가는 효과를 쉽게 만들 수 있습니다. HTML 문서에 ...

jQuery / Method / .hover()

jQuery / Method / .hover()

.hover() .hover()로 선택한 요소에 마우스 포인터를 올렸을 때, 그리고 마우스 포인터가 그 요소를 벗어났을 때 어떤 효과를 넣을 수 있습니다. 문법 .hover( handlerIn(eventObject), handlerOut(eventObject) ) handlerIn(eventObject)에는 요소에 마우스 포인터를 올렸을 때의 효과를, handlerOut(eventObject)에는 마우스 포인터가 요소를 벗어났을 때의 효과를 넣습니다. 예제 span 요소에 마우스 포인터를 올리면 글자가 커지고, 포인터가 벗어나면 다시 원래대로 돌아옵니다. <!doctype html> <html lang="ko"> ...

jQuery / Plugin / 유용한 플러그인 모음

jQuery / Plugin / 유용한 플러그인 모음

Uncategorized Smooth Scroll : 한 페이지에 있는 링크 사이를 부드럽게 이동하게 해주는 플러그인 jQuery Actual : 보이지 않는 요소의 크기를 가져오는 플러그인 vTicker : 아래에서 위로 스크롤되는 티커

jQuery / Selector / :even - 짝수 인덱스 요소를 선택하는 선택자

jQuery / Selector / :even - 짝수 인덱스 요소를 선택하는 선택자

:even :even은 짝수 인덱스 요소를 선택하는 선택자입니다. 문법 $( ':even' ) 예를 들어 $( 'p:even' ) 은 짝수 인덱스 문단을 선택합니다. 주의할 점은 첫번째 요소 인덱스가 0부터 시작한다는 것입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> ...

jQuery / .ajax() / 동기식으로 사용하는 방법

jQuery / .ajax() / 동기식으로 사용하는 방법

Ajax는 Asynchronous JavaScript and XML의 약자입니다. 이름에서도 알 수 있듯이 비동기식으로 데이터를 가져옵니다. jQuery의 .ajax()도 마찬가지입니다. 데이터 요청을 해놓고 요청에 응답하는 순서대로 처리합니다. 비동기식이 여러모로 효율적이지만, 간혹 동기식 처리가 필요한 경우가 있습니다. 데이터 처리를 요청한 순서대로 해야 하는 경우 .ajax()로 가져온 데이터를 전역 변수로 넘겨야 하는 경우 .ajax()를 동기식으로 처리하려면 async: false 를 추가하면 됩니다. $.ajax ( { ...

jQuery / Method / .fadeIn() - 선택한 요소를 서서히 나타나게 하는 메서드

jQuery / Method / .fadeIn() - 선택한 요소를 서서히 나타나게 하는 메서드

.fadeIn() .fadeIn()은 선택한 요소를 서서히 나타나게 합니다. 문법 .fadeIn( ) duration duration에는 완전히 나타날 때까지의 시간이 들어갑니다. fast, slow로 정하거나 400 같은 숫자로 정할 수 있습니다. 숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당합니다. 아무것도 입력하지 않으면 기본값 400으로 설정됩니다. 문자로 시간을 정할 때는 따옴표 안에 ...

jQuery 강좌