jQuery( ':empty' )

jQuery API の jQuery( ':empty' ) は、子要素もテキストノードも持たないすべての要素を選択する。

記述方法

jQuery( 'セレクター:empty' )

セレクターに一致した要素のうち、子要素もテキストノードも持たないすべての要素を選択。

実装例(サンプル)

セル セル
セル
セル セル

実装例(サンプル)の動作について

「toggle」ボタンをクリックすると、子要素もテキストノードも持たないセルの背景色が、ピンク色に変わる。

「toggle」ボタンを再度クリックすると、子要素もテキストノードも持たないセルの背景色が、黄色に戻る。

実装例(サンプル)のソースコード

JavaScript

<script type="text/javascript">
<!--
jQuery( function() {
    jQuery( '#jquery-api-click' ) . toggle(
        function () {
            jQuery( '#jquery-api-empty td:empty' ) . css( {
                backgroundColor: 'pink',
            } );
        },
        function () {
            jQuery( '#jquery-api-empty td:empty' ) . css( {
                backgroundColor: 'yellow',
            } );
        }
    );
} );
// -->
</script>

CSS

<style>
<!--
#jquery-api-empty td {
    background-color: yellow;
}
-->
</style>

HTML

<button id="jquery-api-click">toggle</button>
<table id="jquery-api-empty">
    <tr>
        <td>セル</td>
        <td></td>
        <td>セル</td>
    </tr>
    <tr>
        <td></td>
        <td>セル</td>
        <td></td>
    </tr>
    <tr>
        <td>セル</td>
        <td></td>
        <td>セル</td>
    </tr>
</table>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, コンテンツフィルタ, セレクター タグ: パーマリンク