jQuery yuga.jsを使って、:empty疑似クラスの要素(空要素)を指定

yuga.jsを使って、内容が空の要素にemptyというクラスを付加。サンプルは、リスト表示、p要素、table要素。jsで「空」の文字を加え、cssでバックグラウンドを黄色にしています。

◯リスト表示の場合

ソース

<ul >
<li>リスト1 dummy text</li>
<li>リスト2 dummy text</li>
<li></li>
<li>リスト4 dummy text</li>
<li></li>
<li>リスト6 dummy text</li>
</ul>

CSS:
li.empty {background: yellow;}

JS:
$(function() { $('li:empty').text(' 空'); });


◯ p要素の場合

dummy text

dummy text

dummy text

ソース

HTML:
<p>dummy text</p>
<p>dummy text</p>
<p></p>
<p>dummy text</p>
<p></p>

CSS:
p.empty {background: yellow;}

JS:
$(function() { $('p:empty').text('空'); });


◯ table要素の場合

dummy text dummy text
dummy text dummy text
dummy text dummy text
dummy text

ソース

HTML:
<table>
<tr><td>dummy text</td><td></td><td>dummy text</td></tr>
…略…
<tr><td></td><td>dummy text</td><td></td></tr>
</table>

CSS:
td.empty {background: yellow;}

JS:
$(function() { $('td:empty').text('空'); });