jQuery( ':only-of-type' )

投稿日: 2013年12月4日 作成者: alphasis

jQuery API の jQuery( ':only-of-type' ) は、兄弟要素を持たない全ての要素を選択する。

記述方法（構文）

jQuery( 'セレクター:only-of-type' )

「セレクター」に一致した全ての要素のうちの、兄弟要素を持たい全ての要素を選択。

実装例（サンプル）

b子要素span要素i要素 b子要素span要素 span要素
b子要素span要素 span要素span要素span要素 b子要素span要素
b子要素 span要素b子要素 b子要素i要素span要素

実装例（サンプル）のソースコード

JavaScript

<script type="text/javascript">
<!--
jQuery( function() {
    jQuery( '#sampleTable span:only-of-type' ) . css( {
        backgroundColor: 'yellow',
    } );
} );
// -->
</script>

CSS

<style>
<!--
#sampleTable td {
    background-color: #FFFFCC;
}
#sampleTable td b,
#sampleTable td i,
#sampleTable td span {
    margin-left: 1em;
    font-size: 12px;
}
-->
</style>

HTML

<table id="sampleTable">
    <tr>
        <td><b>b子要素</b><span>span要素</span><i>i要素</i></td>
        <td><b>b子要素</b><span>span要素</span></td>
        <td><span>span要素</span></td>
    </tr>
    <tr>
        <td><b>b子要素</b><span>span要素</span></td>
        <td><span>span要素</span><span>span要素</span><span>span要素</span></td>
        <td><b>b子要素</b><span>span要素</span></td>
    </tr>
    <tr>
        <td><b>b子要素</b></td>
        <td><span>span要素</span><b>b子要素</b></td>
        <td><b>b子要素</b><i>i要素</i><span>span要素</span></td>
    </tr>
</table>

スポンサード リンク

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