:empty

$(':empty') 1.0追加

テキストを含む子要素を持たないエレメントを選択します。

:parentと正反対のセレクタです。
:empty(:parentも同様)は、テキストノードも検証対象になるということに注意してください。

W3Cはただのテキストノードを含め<P>要素は、必ず1つの子要素を持たせることを推奨しています。 (Paragraphs, Lines, and Phrases)
一方で子要素を持たせないことが定義づけられている要素も存在します。(例:<input>, <img>, <br>, <hr>)

デモ

子要素が空のTD要素を選択し、背景色を変え、「空です」というテキストをセットしています。

<!DOCTYPE html>
<html>
<head>
<style>
  td { text-align:center; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table border="1">
    <tr><td>TD #0</td><td></td></tr>
    <tr><td>TD #2</td><td></td></tr>
    <tr><td></td><td>TD#5</td></tr>
  </table>
<script>$("td:empty").text("空です").css('background', 'rgb(255,220,200)');</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM